How to Make a Div Element Occupy Remaining Page Height While Maintaining a Fixed Height for Another Div?

与 Div 元素保持一致的高度分布

通过先进的 CSS 技术可以确保多个 div 元素之间的比例高度分布。考虑以下场景：

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><div>

登录后复制</div></div>

目标是让div2占据页面的剩余高度，同时让div1保持其固定

解决方案：绝对定位

通过使用以下 CSS 样式，您可以实现所需的行为：

登录后复制</div></div>

div1{

width: 100%;
height: 50px;
background-color:red;/*Development Only*/

登录后复制</div></div>

}

div2{

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

登录后复制</div></div>

}
<div>

</div>

登录后复制</div></div>

</div>

说明

作者对 div2 应用绝对定位，它会从页面的正常流程中删除，而是根据指定的顶部和底部值进行定位。 top属性设置距div1上边缘的距离，而bottom属性确保元素延伸到页面底部。 div2的宽度设置为100%，跨越页面的整个宽度。

这种技术可以让你根据div1的高度和页面整体高度动态调整div2的高度，保证一致和响应式布局。

</div>

以上是如何让一个div元素占据剩余页面高度，同时保持另一个div的固定高度？的详细内容。更多信息请关注PHP中文网其他相关文章！

来源：php.cn

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

作者最新文章