iscroll.js的基本布局

对于手机端页面，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单位更适合用在移动端。

var iscroll = new IScroll('#content')  //所在盒子的id

这样一个简单的弹性盒子布局，iscroll布局就完成了，我们所要做的就是让内容区域的高度大于#content的高。