实现上下导航栏固定,中间内容滚动且滚动条不超出滚动区域

H5布局: 在写移动端布局的时候,会发现侧边栏的滚动条会超出底部,这会给用户非常不好的体验, 要想实现上下导航栏固定,中间内容滚动且滚动条不超出滚动区域

效果图:

结构如下:

<div class="container">
    <div style="background-color: #606;">
        <header>zxc1</header>
        <div style="height:70px"></div>
    </div>
    <main>
        <ul>
            <li>11111</li>
            <li>自行车</li>
            <li>自行车</li>
            <li>自行车</li>
            <li>自行车</li>
            <li>11111</li>
        </ul>
    </main>
    <div style="background-color: #606">
        <div style="height:70px"></div>
        <footer>zxc1</footer>
    </div>
</div>

css部分：

    * {
            margin: 0;
            padding: 0
        }
       html,
        body {
            height: 100%
        }
        .container {
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        header {
            position: fixed;
            width: 100%;
            top: 0;
        }

        main {
            height: 100%;
            overflow: auto;
        }

        footer {
            position: fixed;
            bottom: 0;
        }

关键点:

• 1.html和body的高度设置100%，为当前屏幕的高度，container高度也设置为100%，这样就继承了当前屏幕的高度.
• 2.上下两个导航栏固定定位,脱离了文档流,需要占位处理
• 3.将container设置为flex布局，换轴，因为上下两端有了占位，直接将main高度设置为100%
• 4.main设置overflow：auto超出部分显示滚动条