如何使用 CSS 将 div 的高度调整为其容器高度？答案

【问题标题】：how to size a div's height to its container height, using CSS?如何使用 CSS 将 div 的高度调整为其容器高度？
【发布时间】：2010-12-25 06:14:31
【问题描述】：

如何使用 CSS 将 div 的高度调整为其容器高度？

<div class='container'><br>
  &nbsp;&nbsp;<div style='display: block; height: 500px'>left</div><br>
  &nbsp;&nbsp;<div id='to-be-sized' >right</div><br>
</div>

【问题讨论】：

不知道这是可能的，但对任何答案都感兴趣

标签： html css

【解决方案1】：

你能不能把包含元素的高度设置为 height:100%;

【讨论】：

不，因为容器有height: auto，所以height: 100% 会退回到auto。
我认为 height:auto 是没有明确设置高度的容器的默认值？
是（是默认设置，stackoverflow 不喜欢三个字符的 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>
    &nbsp;&nbsp;
    <div style='display: block; height: 500px'>left</div>
    <br>
    &nbsp;&nbsp;
    <div id='to-be-sized' >right</div><br>
</div>

</body>
</html>

【讨论】：

【解决方案9】：

您可以：

使用纯 CSS 的不完整但哲学上正确的路径，并面对浏览器之间的各种不兼容

或

写下 3 行脏的语义不正确和魔鬼制造的表格，让它在任何地方都能完美运行

你的选择:)

【讨论】：

这个答案让我笑了=）。
多年来，很多人都讨厌表格，而对于这么多问题来说，表格是唯一可靠的解决方案。 CSS 标准从一开始就被打破了。这么简单的问题应该是小菜一碟，但事实并非如此。
表格在 90 年代到处都是：D 然后现代 Web 开发说它们很糟糕。现在，哦！多么新的功能，表格！！！
请参阅下面的stackoverflow.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 文件中找到它。

.container{padding-top:100px;padding-bottom:50px}header

【讨论】：

【解决方案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%;
}

【讨论】：