移动端H5开发之顶部固定导航布局

一般我们都是用fixed来固定定位，代码如下：

position:fixed;

top:0;

left:0;

right:0;

但这样会出现很多的问题：

类似下拉页面时，导航会一起滚动，无法固定在屏幕顶部，或者是有input标签的时候，调出软键盘之后，页面无法往上顶，导致标签被挡住，尤其是在414屏，效果更严重

所以为解决这些兼容性问题，建议使用如下两种布局：

其一：position:absolute 

首先构建一个width: 100%;height: 100%;overflow:hidden;的容器，在此容器中，分离顶部导航跟内容区，顶部导航为absolute定位，内容区为滚动区，这样即可达到导航固定在顶部，页面可滚动，整体代码如下：

.view {

        position: absolute;

        left: 0;

        right: 0;

        top: 0;

        z-index: 1;

        overflow: hidden;

        width: 100%;

        height: 100%;

        margin: 0 auto;

        -webkit-box-sizing: border-box;

        box-sizing: border-box;

    }

    .header {

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        z-index: 1000;

        width: 100%;

    }

    .content {

        overflow-y: scroll;

        position: absolute;

        width: 100%;

        height: 100%;

    }

其二： flex布局

将整体页面一分为二，头部跟内容区，flex方向为垂直即可

代码如下：

.view {

    display: flex;

    flex-direction: column;

    flex-wrap: nowrap;

    width: 100%;

    height: 100%;

}

.header {

}

.content {

    overflow-y: scroll;

}

————————————————

原文链接：https://blog.csdn.net/suchaiyishengtui/article/details/86699422