使div(height)占据父级剩余高度

Question

考虑以下 HTML/css 代码示例：

 <div id="container">
    <div id="up">Text<br />Text<br />Text<br /></div>
    <div id="down">Text<br />Text<br />Text<br /></div>
</div>

 #container { width: 300px; height: 300px; border:1px solid red;}
#up { background: green; }
#down { background:pink;}

我有一个容器 div 有两个孩子（也在这里：http: //jsfiddle.net/S8g4E/ ）。第一个孩子的身高是给定的。我怎样才能让第二个孩子在不给出具体高度的情况下占据容器的“自由空间” div ？

在示例中，粉红色 div 也应该占据空白。

---

类似这个问题： 如何让div占据剩余高度？

但我不想给 position absolute 。

原文由 Alvaro 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

扩展 #down 子级以填充 #container 的剩余空间可以通过多种方式完成，具体取决于您希望实现的浏览器支持以及是否 #up 一个定义的高度。

样品

 .container {
  width: 100px;
  height: 300px;
  border: 1px solid red;
  float: left;
}
.up {
  background: green;
}
.down {
  background: pink;
}
.grid.container {
  display: grid;
  grid-template-rows: 100px;
}
.flexbox.container {
  display: flex;
  flex-direction: column;
}
.flexbox.container .down {
  flex-grow: 1;
}
.calc .up {
  height: 100px;
}
.calc .down {
  height: calc(100% - 100px);
}
.overflow.container {
  overflow: hidden;
}
.overflow .down {
  height: 100%;
}

 <div class="grid container">
  <div class="up">grid
    <br />grid
    <br />grid
    <br />
  </div>
  <div class="down">grid
    <br />grid
    <br />grid
    <br />
  </div>
</div>
<div class="flexbox container">
  <div class="up">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
  <div class="down">flexbox
    <br />flexbox
    <br />flexbox
    <br />
  </div>
</div>
<div class="calc container">
  <div class="up">calc
    <br />calc
    <br />calc
    <br />
  </div>
  <div class="down">calc
    <br />calc
    <br />calc
    <br />
  </div>
</div>
<div class="overflow container">
  <div class="up">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
  <div class="down">overflow
    <br />overflow
    <br />overflow
    <br />
  </div>
</div>

网格

CSS 的 grid 布局提供了另一种选择，尽管它可能不像 Flexbox 模型那么简单。但是，它只需要设置容器元素的样式：

 .container { display: grid; grid-template-rows: 100px }

grid-template-rows 将第一行定义为固定的100px高度，其余行将自动拉伸以填充剩余空间。

我很确定 IE11 需要 -ms- 前缀，因此请确保验证您希望支持的浏览器中的功能。

弹性盒

CSS3 的 灵活框布局模块 ( flexbox ) 现在得到了很好的支持并且可以非常容易地实现。因为它很灵活，它甚至可以在 #up 没有定义的高度时工作。

 #container { display: flex; flex-direction: column; }
#down { flex-grow: 1; }

重要的是要注意 IE10 和 IE11 对某些 flexbox 属性的支持可能有问题，而 IE9 或更低版本根本不支持。

计算高度

另一个简单的解决方案是使用 CSS3 calc 功能单元， 正如 Alvaro 在他的回答中指出的那样，但它要求第一个孩子的身高是一个已知值：

 #up { height: 100px; }
#down { height: calc( 100% - 100px ); }

它得到了相当广泛的支持，唯一值得注意的例外是 <= IE8 或 Safari 5（不支持）和 IE9（部分支持）。其他一些问题包括将 calc 与 transform 或 box-shadow 结合使用，因此如果您担心这一点，请务必在多个浏览器中进行测试。

其他选择

如果需要较旧的支持，您可以将 height:100%; 添加到 #down 将使粉红色 div 全高，但有一个警告。它会导致容器溢出，因为 #up 将其向下推。

因此，您可以将 overflow: hidden; 添加到容器中以修复该问题。

或者，如果 #up 的高度是固定的，您可以将其绝对定位在容器内，并向 #down 添加填充顶部。

而且，另一种选择是使用表格显示：

 #container { width: 300px; height: 300px; border: 1px solid red; display: table;}
#up { background: green; display: table-row; height: 0; }
#down { background: pink; display: table-row;}​

原文由 Jeff Jenkins 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我问这个问题已经快两年了。我刚刚想出了解决我遇到的这个问题的 css calc() 并且认为添加它会很好以防有人遇到同样的问题。 （顺便说一句，我最终使用了绝对位置）。

http://jsfiddle.net/S8g4E/955/

这是CSS

 #up { height:80px;}
#down {
    height: calc(100% - 80px);//The upper div needs to have a fixed height, 80px in this case.
}

以及更多关于它的信息：http: //css-tricks.com/a-couple-of-use-cases-for-calc/

浏览器支持： http ://caniuse.com/#feat=calc

原文由 Alvaro 发布，翻译遵循 CC BY-SA 3.0 许可协议