可以通过多种方式扩展
#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 > <div >grid <br />grid <br />grid <br /> </div> <div >grid <br />grid <br />grid <br /> </div></div><div > <div >flexbox <br />flexbox <br />flexbox <br /> </div> <div >flexbox <br />flexbox <br />flexbox <br /> </div></div><div > <div >calc <br />calc <br />calc <br /> </div> <div >calc <br />calc <br />calc <br /> </div></div><div > <div >overflow <br />overflow <br />overflow <br /> </div> <div >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是固定的，则可以将其绝对放置在容器中，并在上添加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;}
