css - 下面的 div 具有固定的高度，上面的 div 填充了剩余的垂直空间？

Question

如何创建一个具有固定高度并保持在页面底部的 div，而在其上方的另一个 div 占据剩余的垂直空间？

Answer 1

像这样的东西应该可以实现您正在寻找的东西。

Answer 2

我认为调整页面大小时，其他任何示例都不能很好地工作。

这类事情最好用几行 javascript 来完成，因为一般来说 CSS 做得不好。

有关工作演示，请参见此处。mod.it 要求您在 chrome 中查看演示，但演示中的代码是跨浏览器的，并且可以在任何地方工作。

https://mod.it/6hQaRsEL

Answer 3

像这样试试

看演示

使用高度：继承您的第一个 div，它采用剩余的可用高度

html

<div id='container'>
<div id='first'>
    First Div content
</div>
    <div id='second'>
        Second div content
    </div>
</div>

CSS

#container{
width: 600px;
height: 450px;
border: 1px solid black;
}
#second{
position: relative;
bottom: 100px;
height: 100px;
background-color: green;
}  
#first{
height: inherit;
background-color: red;
}