html上下布局，上方高度固定，下方高度自动填满

最新推荐文章于 2024-12-02 16:03:41 发布

原创最新推荐文章于 2024-12-02 16:03:41 发布 · 1.9w 阅读

18 ·

CC 4.0 BY-SA版权

文章标签：

#上下布局 #左右布局

前端知识专栏收录该内容

13 篇文章

订阅专栏

本文介绍了一种常见的网页布局方法，利用绝对定位和浮动实现顶部固定高度、底部左侧固定宽度且右侧自适应填充的内容区域布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

要实现如下图所示的布局：

说明：这种页面布局十分常用，上方为固定高度，下方自动填满下方高度；下方左侧为固定宽度，下方右侧自动填满剩余宽度。

<style>
html,
body { height: 100%; padding: 0; margin: 0; }
.outer { height: 100%; position: relative; }
.A { height: 100px; background: #BBE8F2; }
.B { background: #D9C666; width: 100%; position: absolute; top: 100px ; left: 0 ; bottom: 0; }
</style>

<div class="outer">
    <div class="A">
        时空信息云平台<span>管理中心</span>
    </div>
    <div class="B">
        <div class="leftp" style="width:300px;height:100%;background-color:red;float:left;">
        </div>
        <div class="rightp" style="margin-left:300px;height:100%">
        </div>
    </div>
</div>