移动端h5顶部菜单栏_移动端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;
}
————————————————
原⽂链接：blog.csdn/suchaiyishengtui/article/details/86699422

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