这里采用的是新盒模型来进行排版:
<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/,具体的用法,网址里面都有说明啦,好啦,一个简单的移动端页面就形成了。