自己的总结的一些方法,如果有什么新的好的方法希望能够交流:
1.给定位(导航栏)(底部)
nav{ position:fixed; top:0rem; }; footer{ position:fixed; bottom:0rem; };
但是这个方法会有弊端,在你给nav设置定位时,内容区域就会顶头出现,就需要给内容区域设置定位设置top值nav的高度方可。
2.使用IScroll插件。
例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; list-style:none; } body,html{ width: 100%; height: 100%; overflow: hidden; } nav{ font-weight: bold; color: white; text-align: center; width: 100%; height: 3rem; line-height:3rem; background: black; } footer{ text-align: center; color: white; font-weight: bold; line-height: 3rem; width: 100%; height: 3rem; } .wrap{ width: 100%; height: 100%; overflow: auto; } ul li{ width: 100%; height: 5rem; line-height: 5rem; } footer{ bottom:0rem; position: absolute; height: 3rem; background: firebrick; } </style> </head> <body> <nav>头部导航</nav> <div class="wrap"> <!--<div class="box">--> <ul> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> <li>我是内容区域</li> </ul> <!--</div>--> </div> <footer> 底部 </footer> </body> <script src="js/iscroll-probe.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> var a =new IScroll(".wrap",{ }) </script> </html> 3.第三那种弹性盒子:弊端(会改变nav的高度); <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <style type="text/css"> *{ margin: 0; padding: 0; } body,html,.wrap{ width: 100%; height: 100%; overflow: hidden; display: flex; flex-grow: 1; flex-direction: column; } .box{ width: 100%; overflow: auto; } nav{ width: 100%; height: 3rem; line-height: 3rem; background: black; color: white; font-weight: bold; text-align: center; } footer{ text-align: center; width: 100%; height: 3rem; line-height: 3rem; color: white; font-weight: bold; background: firebrick; } .box ul li{ width: 100%; height: 5rem; line-height: 5rem; } </style> </head> <body> <div class="wrap"> <nav>头部</nav> <div class="box"> <ul> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> <li>内容区域</li> </ul> </div> <footer>底部</footer> </div> </body> </html>
如果还有其他好的方法,希望能一起交流;