如何讓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，使其佔據剩餘空間身高。