使div（高度）占据父级剩余高度

Question

http://jsfiddle.net/S8g4E/

我有一个div带两个孩子的容器。第一个孩子有给定的身高。如何让第二个孩子占据容器的“自由空间” div而不给其指定高度？

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

与此问题类似：如何使div占据剩余高度？

但是我不想摆绝对的位置。

Answer 1

可以通过各种方式扩展#down子级以填充剩余的空间，#container具体取决于您希望获得的浏览器支持以及是否#up具有定义的高度。.container {&nbsp; width: 100px;&nbsp; height: 300px;&nbsp; border: 1px solid red;&nbsp; float: left;}.up {&nbsp; background: green;}.down {&nbsp; background: pink;}.grid.container {&nbsp; display: grid;&nbsp; grid-template-rows: 100px;}.flexbox.container {&nbsp; display: flex;&nbsp; flex-direction: column;}.flexbox.container .down {&nbsp; flex-grow: 1;}.calc .up {&nbsp; height: 100px;}.calc .down {&nbsp; height: calc(100% - 100px);}.overflow.container {&nbsp; overflow: hidden;}.overflow .down {&nbsp; height: 100%;}<div class="grid container">&nbsp; <div class="up">grid&nbsp; &nbsp; <br />grid&nbsp; &nbsp; <br />grid&nbsp; &nbsp; <br />&nbsp; </div>&nbsp; <div class="down">grid&nbsp; &nbsp; <br />grid&nbsp; &nbsp; <br />grid&nbsp; &nbsp; <br />&nbsp; </div></div><div class="flexbox container">&nbsp; <div class="up">flexbox&nbsp; &nbsp; <br />flexbox&nbsp; &nbsp; <br />flexbox&nbsp; &nbsp; <br />&nbsp; </div>&nbsp; <div class="down">flexbox&nbsp; &nbsp; <br />flexbox&nbsp; &nbsp; <br />flexbox&nbsp; &nbsp; <br />&nbsp; </div></div><div class="calc container">&nbsp; <div class="up">calc&nbsp; &nbsp; <br />calc&nbsp; &nbsp; <br />calc&nbsp; &nbsp; <br />&nbsp; </div>&nbsp; <div class="down">calc&nbsp; &nbsp; <br />calc&nbsp; &nbsp; <br />calc&nbsp; &nbsp; <br />&nbsp; </div></div><div class="overflow container">&nbsp; <div class="up">overflow&nbsp; &nbsp; <br />overflow&nbsp; &nbsp; <br />overflow&nbsp; &nbsp; <br />&nbsp; </div>&nbsp; <div class="down">overflow&nbsp; &nbsp; <br />overflow&nbsp; &nbsp; <br />overflow&nbsp; &nbsp; <br />&nbsp; </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或更低版本完全不支持。计算高度另一个简单的解决方案是使用CSS3calc功能单元，正如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是固定的，则可以将其绝对放置在容器中，并在上添加padding-top #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;}