移动端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

参考文章：
https://blog.csdn.net/xiaoxiaohui520134/article/details/83009069
http://www.fly63.com/article/detial/859