移动端H5开发之顶部固定导航布局
在开发移动端h5应⽤时，尤其是在开发混合app时，⼀般情况下，顶部导航会⼀直固定在页⾯头部，如下图：
h5的常规操作是直接来个fixed定位，代码如下：
position:fixed;
top:0;
left:0;
right:0;
但是，这种写法，在ios系统下，会出现⼀些，类似下拉页⾯时，导航会⼀起滚动，⽆法固定在屏幕顶部，或者是有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%;
}
这种⽅式在于对overflow的了解深度，越透彻，越容易理解。。。
其⼆： flex布局
将整体页⾯⼀分为⼆，头部跟内容区，flex⽅向为垂直即可
代码如下：
.view {
display: flex;
box sizing
flex-direction: column;    flex-wrap: nowrap;
width: 100%;
height: 100%;
}
.header {
}
.content {
overflow-y: scroll;
}
如有布局问题，请留⾔哦

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。