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

最新推荐文章于 2024-08-10 23:05:55 发布

Copying God

最新推荐文章于 2024-08-10 23:05:55 发布

阅读量3.7k

点赞数 7

分类专栏：自学前端笔记文章标签： html css

本文链接：https://blog.csdn.net/zxy1884608/article/details/110198613

版权

自学前端笔记专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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超出部分显示滚动条