如何让div元素占据页面剩余高度？

占据div元素的剩余高度

在网页设计中，你可能会遇到需要让div元素占据剩余高度的情况页面的高度。考虑这个场景：你有两个 div，代码如下：

<div>
<p>如何让 div2 占据页面的剩余高度？</p>
<p><strong>解决方案：绝对定位</strong></p>
<p>要实现此目的，您可以通过以下 CSS 使用绝对定位：</p>
<pre class="brush:php;toolbar:false">#div1{
    width: 100%;
    height: 50px;
    background-color:red;/*Development Only*/
}
#div2{
    width: 100%;
    position: absolute;
    top: 50px;
    bottom: 0;
    background-color:blue;/*Development Only*/
}

在此代码中：

• Div1 的固定高度为 50px并跨越页面的整个宽度。
• Div2 是绝对定位的，其上边距设置为 50px（div1 的高度），下边距设置为 0，使其占据剩余高度。