移动端页面底部导航条固定方法

最新推荐文章于 2023-12-28 14:06:40 发布

从此花海一片

最新推荐文章于 2023-12-28 14:06:40 发布

阅读量4k

点赞数

分类专栏： html

原文链接：https://www.jianshu.com/p/6a679ff822d1

版权

html 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.平时我们让导航栏不随页面滚动一般使用position:fixed进行固定,但这个方法在ios移动端有兼容性问题(当呼出键盘时底部就会被顶上去)

2.为解决这一问题,我们可以转变思路,让body和html不滚动,将屏幕分为两块区域,分别是导航栏和中间内容区域,然后中间内容区域设置over-flow:auto,让中间的内容区域自己滚动,从而达到页面滚动效果.
转载地址：https://www.jianshu.com/p/6a679ff822d1

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .web{
                width: 100%;
                height: 100%;
                position: relative;
                background: red;
            }
            .footer{
                position: absolute;
                height: 50px;
                width: 100%;
                background: blue;
                bottom: 0;
            }
            .content{
                position: absolute;
                left:0;
                right: 0;
                top:0;
                bottom:50px;
                /*height: calc(100% - 50px);*/
                background: yellow;
                overflow: auto;
            }
            .test{
                height: 1000px;
                background: linear-gradient(red,white);
            }
        </style>
    </head>
    <body>
        <div class="web">
            <div class="content">
                <div class="test"></div>
            </div>
            <div class="footer"></div>
        </div>
    </body>
</html>

从此花海一片

关注

0
点赞
踩
11

收藏

觉得还不错? 一键收藏
0
评论
移动端页面底部导航条固定方法

1.平时我们让导航栏不随页面滚动一般使用position:fixed进行固定,但这个方法在ios移动端有兼容性问题(当呼出键盘时底部就会被顶上去)2.为解决这一问题,我们可以转变思路,让body和html不滚动,将屏幕分为两块区域,分别是导航栏和中间内容区域,然后中间内容区域设置over-flow:auto,让中间的内容区域自己滚动,从而达到页面滚动效果.转载地址：https://www.ji...
复制链接

扫一扫

专栏目录