对于手机端页面，iscroll是我们常用的js插件。它的主要功能是让我们滑动手机页面。
在这里给大家分享一下它的基本布局。
html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> //移动端页面必须 <script src="../iscroll.js" type="text/javascript" charset="utf-8"></script> <link rel="stylesheet" type="text/css" href="new.css"/> </head> <body> <div id="box"> <header></header> <div id="content"> <div> <div id="active"> </div> </div> </div> <footer></footer> </div> </body> </html>
css
*{ margin: 0; padding: 0; } body,html,#box{ width: 100%; height: 100%; } #box{ display: flex; //弹性盒子布局 flex-direction: column; //纵向布局 } header{ width: 100%; height: 150px; background: #f2f2f2; } #content{ width: 100%; flex-grow: 1; //占所剩所有位置 } footer{ width: 100%; height: 150px; background: #F2F2F2; }
注意我这里没有用到单位 em 而是用的px。 其实em单位更适合用在移动端。
js
var iscroll = new IScroll('#content') //所在盒子的id
这样一个简单的弹性盒子布局，iscroll布局就完成了，我们所要做的就是让内容区域的高度大于#content的高。