移动端H5固定底部导航菜单的三种布局实现
需求：
需要把导航固定在底部？只能滑动内容，导航菜单固定不动的。效果如下：
滚动区域
底部固定菜单
⽅法⼀：使⽤fixed
.box{
.roll{
padding-bottom:1rem;
}
footer{
position:fixed;bottom:0;z-index:999;
}
}
滚动区域留下底部导航⾼度的padding距离
底部导航fixed固定定位到底部
设置z-index:999因为底部定位为fixed或absolute的时候，出现优先级别较低，导致被其他div覆盖的情况，那么这⾥就需要⽤到z-index，来让他成为最⾼级别，不⾄于被覆盖。
Fixed总是以body为定位时的对象，总是根据浏览器的窗⼝来进⾏元素的定位.通过left top right bottom 属性进⾏定位.
当我们需要使⼀个层相对于浏览器来⾃动调整该层的位置的时候如果使⽤position:absolute来定位该层会发现不能达到想要的css效果.这时候就需要⽤到fixed属性来定位该层了.
底部定位为fixed或absolute，存在输⼊框的时候，会出现如下情况：
ios：激活输⼊框时，底部不会弹出来（合理）。
Android：激活输⼊框时，底部会跟着输⼊框弹出来（不合理）
传统解决办法：通常将底部设置为fixed，当激活输⼊框的时候，将底部定位改为relative，即可兼容ios和Android。
⽅法⼆：使⽤absolute
.box{
position: relative;height: 100%;
.roll{
position: absolute;bottom:1rem;top: 0;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
}
footer{
position: absolute;bottom:0;
}
}
让box相对定位 滚动区域和底部导航相对于盒⼦绝对定位.
overflow-y:scroll 裁剪内容提供滚动机制
设置-webkit-overflow-scrolling 属性。这样才能保证滚动区域的流畅性，-webkit-overflow-scrolling控制元素在移动设备上是否使⽤滚动回弹效果。底部导航定位在底部.
over-flow-y 属性规定如果溢出元素内容区域的话是否对内容的上下边缘进⾏裁剪
hidden 裁剪内容不提供滚动机制
scroll 裁剪内容提供滚动机制
auto 如果溢出框则应该提供滚动机制
-webkit-overflow-scrolling属性控制元素在移动设备上是否使⽤滚动回弹效果
auto 使⽤普通滚动当⼿指从触摸屏上移开滚动会⽴即停⽌
touch 使⽤具有回弹效果的滚动当⼿指从触摸屏上移开，内容会继续保持⼀段时间的滚动.
注意：在部分浏览器中设置overflow-y: scroll；会出现滚动条，这时候我们需要全局定义如下样式：
::-webkit-scrollbar{//scroll滚动条设置
width: 0px; height: 0px;background-color: #fff;
}
⽅法三：使⽤flex
.box{
display:flex;display: -webkit-flex;height:100%;flex-direction:column;
.roll{
flex: 1; width: 100%;overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;
}
}
display:flex弹性布局
flex:1
flex
⼦元素之间等⽐例空间分配
⼦元素所占剩余空间分配
flex属性是以下三个属性的简写
flex-grow:0 定义弹性盒⼦的拉伸因⼦即⼦项分配⽗项剩余空间的⽐默认值为0
flex-shrink:1指定flex元素的收缩规则 ⼦项的收缩所占的份数默认值为1
flex-basis:auto 指定了flex元素在主轴⽅向上的初始⼤⼩即⼦项的宽度.
导航菜单flex-direction 规定灵活项⽬的⽅向
row灵活的项⽬将⽔平显⽰
row-reverse
column灵活的项⽬将垂直显⽰
column-reverse

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