一般我们都是用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
网友评论