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>