新盒模型移动端的排版

这里采用的是新盒模型来进行排版：

<div class="mytest">
　　<header></header>
　　<section></section>
　　<footer></footer>
</div>

在CSS样式里添加如下样式

html,body{
height: 100%;
}
.mytest{
display: flex;
display: -webkit-flex;
width: 100%;
height: 100%;
flex-direction:column;
}
header{
width: 100%;
height: 20px;
background-color: blue;
}
footer{
width: 100%;
height: 44px;
background-color: red;
}
section{
flex:1;
}

这里的话大致头部和尾部的位置出来了，中间section部分有时候内容超过，则需要添加overfloat:hidden;一旦添加这个属性上去之后，就不能滑动中间部分了，这时候需要让section部分局部滚动，我们可以用iscrolljs插件，这个是网址http://iscrolljs.com/，具体的用法，网址里面都有说明啦，好啦，一个简单的移动端页面就形成了。