3种js+css实现移动设置底部固定菜单，极简方法
解开css中注释，共3种方式，推荐flex方法。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>移动端固定底部菜单</title>
</head>
<body>
<!--
<p>以百分数为主，但px（固定）要弃之。
vw，1vw视口宽度的1%；</p>
<p>定位（position）->布局(flex)->内容位置(div)</p>
<p>vh，vw，%，flexbox,vh，vw，rem,em</p>
-->
<div class="box">
<div class="roll">滚动结构
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构
<br />
滚动结构3
<br />
滚动结构2
<br />
滚动结构1
<br />
</div>
<footer>底部结构菜单</footer>
</div>
<style>
html,body{
margin: 0;
padding: 0;
height: 100%;
width: 100%;
}
footer{
background: green;
width: 100%;
font-size: 4vh;
}
/*1.css固定定位,比底部菜单多一个vh
.roll{
padding-bottom: 5vh;
}
footer{
position: fixed;
bottom: 0;
z-index: 999;
}
end 1*/
/*css相对定位
.box{
position: relative;
height: 100%;
}
.roll{
position:absolute;
top:0;
bottom:5vh;
width: 100%;
height: auto;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
footer{
position: absolute;
bottom: 0;
}
end 2*/
/*3 弹性布局，推荐*/
.box{
display: flex;
display: -webkit-flex;
height: 100%;
flex-direction: column;
}
.roll{
flex:1;
width: auto;
width: 100%;
overflow-y: scroll;
-webkit-overflow-scrolling:touch;
}
</style>
</body>
</html>