简单实现顶部固定，中部自适应布局

最近在重构web导航的时候就发现一个问题，如何实现顶部固定，中部自适应的布局。

很多人会认为这很简单啊，顶部使用position: fixed;就可以实现。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>顶部固定，中部自适应</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .hd {
            position: fixed;
            z-index: 99;
            top: 0;
            width: 100%;
            height: 20px;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #f00;
        }
        
        .bd {
            width: 100%;
            margin-top: 50px;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #00f;
        }
    </style>
</head>

<body>
    <header class="hd">
        我是固定头部
    </header>
    <div class="bd">
        我是中部部分
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
    </div>
</body>

</html>

这种做法确实简单，但是，请看清题目，顶部固定，中部自适应。（顶部不包括滚动条）

花了一点时间的思考，终于想出来了，中部使用position:absolute;就可以实现。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <title>顶部固定，中部自适应</title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        
        .hd {
            width: 100%;
            height: 50px;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #f00;
        }
        
        .bd {
            position: absolute;
            top: 50px;
            /* 往下移顶部的距离 */
            bottom: 0;
            /* 底部贴边 */
            overflow: auto;
            /* 溢出的部分自适应 */
            /* 不设置高度 */
            width: 100%;
            padding: 15px 0;
            text-align: center;
            color: #fff;
            background: #00f;
        }
    </style>
</head>

<body>
    <header class="hd">
        我是固定头部
    </header>
    <div class="bd">
        我是中部部分
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
        <p>超出的部分滚动</p>
    </div>
</body>

</html>

PS：这种做法的好处是不占顶部宽度，顶部100%显示全部区域，特别适用于针对右上角有菜单导航的页面。

简单实现顶部固定，中部自适应布局

相关推荐