上下两个元素高度固定，中间内容自适应

最新推荐文章于 2024-02-08 09:27:17 发布

原创最新推荐文章于 2024-02-08 09:27:17 发布 · 531 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css

本文介绍一种网页布局方式，头部和底部采用固定高度，中间主体部分自适应填充浏览器可视区域，当内容超出时自动显示滚动条。通过合理设置div元素及样式，确保页面在不同屏幕尺寸下保持完整性和美观性。

头尾固定高度中间高度自适应布局

头部固定高度，宽度100%自适应

底部固定高度，宽度100%自适应

中间是主体部分，自动填满，浏览器可视区域剩余部分，内容超出则中间部分出现流动条；

整个内容填满浏览器可视区域，并且不超出此区域！

<div id="dHead">固定头部100px;</div>
    <div id="dBody">
        <div class="mycontent">
            中间自适应部分
        </div>
    </div>
<div id="dFoot">固定尾部100px</div>

<style>
        #dHead {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:5;
            top:0;
        }
        #dBody {
            background:#FC0;
            width:100%;
            overflow:auto;
            position:absolute;
            z-index:10;
            top:100px;
            bottom:100px;
        }
        #dFoot {
            height:100px;
            background:#690;
            width:100%;
            position:absolute;
            z-index:200;
            bottom:0;
        }
    </style>

平常代码中我不推荐使用position: fixed;去定位，因为他是相对于外层，写安卓的应该知道fixed;的弊端
这里使用position:absolute;也可以实现我们想要的功能