固定导航

<div class="box">
    <div class="roll">滚动区域</div>
    <footer>底部固定菜单</footer>
</div>

<style>
html,body{
    margin:0;padding:0;height:100%;width:100%;
}
footer{
    background: #323232;max-width: 750px;width: 100%;height: 55px;color: #fff;
}

.roll{background: pink;}


/*fixed*/
.roll{padding-bottom:1rem;height: 2000px;}
footer{ position:fixed;bottom:0;z-index:999;}

/*.box{position: relative;height: 100%;}
.roll{
    position: absolute;bottom:55px;top: 0;
    overflow-y: scroll;-webkit-overflow-scrolling: touch;height: auto;width: 100%;
}
footer{position: absolute;bottom:0;}*/

/*fixed*/
/*.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;}*/

注意：

1、底部为fixed、absolute定位时，注意优先级【z-index】

2、底部为fixed、absolute定位时，使用输入框时，会出现bug

　　1> ios：激活输入框时，底部不会弹出来（没问题）

　　2> Android：激活输入框时，底部会跟着输入框弹出来（不合理） 

　　解决：当激活输入框时，将定位改为relative即可。

3、使用absolute 或 fixed时，需设置-webkit-overflow-scrolling 属性。这样才能保证滚动区域的流畅性，-webkit-overflow-scrolling控制元素在移动设备上是否使用滚动回弹效果。

4、在部分浏览器中设置overflow-y: scroll;会出现滚动条，这时候我们需要全局定义如下样式：

::-webkit-scrollbar{//scroll滚动条设置
        width: 0px; height: 0px; color: rgb(136, 0, 0);">#fff;
}