div 自适应高度自动填充剩余高度

最新推荐文章于 2025-05-19 11:03:57 发布

原创最新推荐文章于 2025-05-19 11:03:57 发布 · 3.3k 阅读

0 ·

CC 4.0 BY-SA版权

【WEB】CSS+DIV 专栏收录该内容

1 篇文章

订阅专栏

本文介绍两种使用HTML和CSS实现固定头部布局的方法。方案一通过绝对定位将头部固定于顶部，方案二利用负边距实现类似效果。两种方案均考虑了浏览器窗口的高度设置，并确保了页面其余部分能够正确填充剩余空间。

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

方案1：

Html：

<div class="outer">

    <div class="A">
 头部DIV </div>

    <div class="B">下部DIV
 </div>

</div>

CSS：

html,

body
 { height: 100%; padding: 0; margin: 0;
 }

.outer
 { height: 100%; padding: 100px 0 0;
 box-sizing: border-box ; position: relative;
 }

.A
 { height: 100px; background: #BBE8F2; position: absolute; top: 0 ; left: 0 ; width: 100%;
 }

.B
 { height: 100%; background: #D9C666;
 }

效果：

方案2：

HTML：

<div class="outer">

    <div class="A">头部DIV</div>

    <div class="B">下部DIV</div>

</div>

CSS：

html,

body
 { height: 100%; padding: 0; margin: 0;
 }

.outer
 { height: 100%; padding: 100px 0 0;
 box-sizing: border-box ; }

.A
 { height: 100px; margin: -100px 0 0; background: #BBE8F2;
 }

.B
 { height: 100%; background: #D9C666;
 }