如何使用 CSS 将 div 的高度调整为其容器高度？
Posted
技术标签:
【中文标题】如何使用 CSS 将 div 的高度调整为其容器高度？【英文标题】：how to size a div's height to its container height, using CSS? 【发布时间】：2010-12-25 06:14:31 【问题描述】：<div class='container'><br>
<div style='display: block; height: 500px'>left</div><br>
<div id='to-be-sized' >right</div><br>
</div>
【问题讨论】：
不知道这是可能的，但对任何答案都感兴趣 【参考方案1】：你能不能把包含元素的高度设置为 height:100%;
【讨论】：
不，因为容器有height: auto，所以height: 100% 会退回到auto。
我认为 height:auto 是没有明确设置高度的容器的默认值？
是（是默认设置，*** 不喜欢三个字符的 cmets）
这不是答案，而是问题。【参考方案2】：
如果我的理解是正确的，并且没有指定高度的 div 的默认高度是自动的，那么如果不在包含的 div 上设置显式高度，这是不可能的。如果在包含的 div 上设置了显式高度，则包含的 div 上的 height:100% 将意味着它增长到容器的高度。
【讨论】：
【参考方案3】：您似乎正在尝试获得等高的列。您可以使用fauxcolumns 方法，其中使用背景图像来伪造等高。还有其他方法。
【讨论】：
我必须证明这是最简单的方法，并且有最好的浏览器支持。【参考方案4】：这是一件棘手的事情——没有明确的最佳方法，但有一些常见的方法。 如果我们假设您真正需要的是使右列的高度（或看起来）等于左列的高度，您可以使用任何经常用于获得等高列的技术。 This piece 包含一些获得正确外观和行为的技巧。我建议您阅读它，看看它是否能解决您的问题。
另一种方法使用 javascript 来确定容器的高度，并将您的右侧列设置为该高度。该技术已在 SOhere 上进行了讨论。只要容器的大小不是决定外部容器大小的唯一因素，这应该是一种有效的方法（如果不是这种情况，您将遇到可能导致奇怪行为的鸡蛋问题）。
【讨论】：
alistapart.com/articles/fauxcolumns 【参考方案5】：示例代码，您需要从 html 元素开始，以便您可以利用容器中的灵活高度。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>100% Test</title>
<style type="text/css">
html, body, #inner height: 100%
#inner border: 4px blue solid
#container height: 200px; border: 4px red solid
</style>
</head>
<body>
<div id="container">
<div id="inner">
lorem ipsum
</div>
</div>
</body>
</html>【讨论】：
【参考方案6】：您可以告诉容器 div 显示为表格，并让内部 div 显示为表格单元格。
HTML
<body>
<div id="wrap">
<div id="header">
<h1>
My Header</h1>
</div>
<div id="main">
<ul id="nav">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
</ul>
<div id="primaryContent">
</div>
</div>
<div id="footer">
<h1>
My Footer</h1>
</div>
</div>
CSS
#wrap
width: 800px;
margin: auto;
#header
background: red;
#main
display: table;
#nav
background: gray;
width: 150px;
display: table-cell;
#primaryContent
background: yellow;
padding: 0 .5em;
display: table-cell;
IE 修复
#wrap
width: 800px;
margin: auto;
#header, #footer
background: red;
#main
background: url(../bg.png) repeat-y;
#nav
background: gray;
width: 150px;
float: left;
#primaryContent
background: yellow;
margin-left: 150px;
padding: 0 .5em;
【讨论】：
【参考方案7】：如果您碰巧使用 jQuery，有一种方法可以做到这一点。正如您所要求的 CSS，这可能不是您可以使用的选项，但如果您可以使用它，它将完全满足您的需求。
$(divToResize).css('height',$(container).innerHeight());
$(divToResize) 是您希望匹配其容器高度的 DIV 的选择器，$(container) 在逻辑上是您想要获取其高度的容器。
无论容器的高度是否在 CSS 中指定，这都会起作用。
【讨论】：
【参考方案8】：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<style type="text/css">
.container
position:relative;
background-color:#999;
#to-be-sized
position:absolute;
top:0;
height:100%;
background-color:#ddd;
</style>
<body>
<div class='container'>
<br>
<div style='display: block; height: 500px'>left</div>
<br>
<div id='to-be-sized' >right</div><br>
</div>
</body>
</html>
【讨论】：
【参考方案9】：您可以：
使用纯 CSS 的不完整但哲学上正确的路径，并面对浏览器之间的各种不兼容或
写下 3 行脏的语义不正确和魔鬼制造的表格，让它在任何地方都能完美运行你的选择:)
【讨论】：
这个答案让我笑了=）。 多年来，很多人都讨厌表格，而对于这么多问题来说，表格是唯一可靠的解决方案。 CSS 标准从一开始就被打破了。这么简单的问题应该是小菜一碟，但事实并非如此。 表格在 90 年代到处都是：D 然后现代 Web 开发说它们很糟糕。现在，哦！多么新的功能，表格！！！ 请参阅下面的***.com/users/967727/cfrydlewicz 答案；使用min-height: nn; flex-grow: 1; 的 CSS 绝对可行【参考方案10】：
我做了类似 KyokoHunter 的事情：
$('div.row').each(function()
var rowHeight = $(this).innerHeight();
$(this).children('div.column').css('height',rowHeight);
);
这会遍历 div“表”中的每一行，并使高度都匹配，只要 div 被相应地分类。
【讨论】：
【参考方案11】：我知道这个问题在很久以前就得到了回答，但是当我现在遇到这个问题时，我会使用 Flex Box。这很棒。请参阅 Chris Coyier 的 A Complete Guide to Flexbox
.parent
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
width: 100%;
.child
flex-grow: 1;
.child1
min-height: 200px;
background-color: #fee;
.child2
background-color:#eef;
<div class="parent">
<div class="child child1">Child 1</div>
<div class="child child2">Child 2</div>
</div>
Flexbox Layout（Flexible Box）模块旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知和/或动态（因此使用“flex”这个词） )。flex 布局背后的主要思想是让容器能够改变其项目的宽度/高度（和顺序）以最好地填充可用空间（主要是为了适应各种显示设备和屏幕尺寸）。弹性容器扩展项目以填充可用空间，或缩小它们以防止溢出。
最重要的是，与常规布局（基于垂直的块和基于水平的内联）相比，flexbox 布局与方向无关。虽然这些适用于页面，但它们缺乏灵活性（不是双关语）来支持大型或复杂的应用程序（尤其是在改变方向、调整大小、拉伸、收缩等方面）。
【讨论】：
最好发布实际代码并引用链接 - 这样，如果网站出现故障，代码仍然可用。 这是 IMO 的实际解决方案。【参考方案12】：CSS 文件使用“填充”函数来确定容器的高度和深度。要更改容器字段的高度，只需插入调整指定容器的填充字段。
下面的代码摘录是用于容器类的 CSS 示例（您可以在 html 文件中找到它。
.containerpadding-top:100px;padding-bottom:50pxheader
【讨论】：
【参考方案13】：我使用overflow:hidden它可以正常工作。
.bu
overflow: hidden;
background-color:blue;
<div class="bu">
<button>english</button>
</div>【讨论】：
【参考方案14】：尝试将其添加到要调整大小的 div
.layout-fill
margin: 0;
width: 100%;
min-height: 100%;
height: 100%;
【讨论】：
以上是关于如何使用 CSS 将 div 的高度调整为其容器高度？的主要内容，如果未能解决你的问题，请参考以下文章