如何让一个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*/

}