Question

如何创建一个具有固定高度且位于页面底部的div，另一个位于其上方的div占用剩余的垂直空间？

Answer 1

像this这样的东西应该能达到你想要的效果。

Answer 2

试试这个

使用高度：继承你的第一个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;
}

Answer 3

我不认为在调整页面大小时，其他任何示例都能正常工作。

这种类型的东西最好用几行javascript完成，因为它不是CSS在一般情况下做得很好的。

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

https://mod.it/6hQaRsEL

Div高于固定高度，div高于填充剩余的垂直空间？

3 个答案: