如何讓一個div元素佔據剩餘頁面高度，同時保持另一個div的固定高度？

與 Div 元素保持一致的高度分佈

透過先進的 CSS 技術可以確保多個 div 元素之間的比例高度分佈。考慮以下場景：

<pre class="brush:php;toolbar:false"><div>
<p><br></p>
<p>目標是讓div2佔據頁面的剩餘高度，同時讓div1保持其固定</p>
<p><strong>解決方案：絕對定位</strong></p>
<p>透過使用以下CSS 樣式，您可以實現所需的行為：</p>
<p></p>
<p><br> </p>
<div><pre class="brush:php;toolbar:false"><div>
<h1 id="div">div1{</h1>
<pre class="brush:php;toolbar:false">width: 100%;
height: 50px;
background-color:red;/*Development Only*/

}

div2{

width: 100%;
position: absolute;
top: 50px;
bottom: 0;
background-color:blue;/*Development Only*/