上下固定中间滚动的移动端布局

参考移动web页面支持弹性滚动的3个方案

html:


      
header
      

       弹性滚动区域
      
      
footer

css:
html,body{
  height:100%;
}
.wrapper{
  display:-webkit-box;
  display:-webkit-flex;
  display:-ms-flexbox;
  display:flex;
  -webkit-box-orient:vertical;
  -webkit-flex-direction:column;
  -ms-flex-direction:column;
  flex-direction:column;
  width:100%;
  height:100%;
}
header,footer{
  height:40px;
  line-height: 40px;
  background-color:#D8D8D8;
  text-align:center;
}
section{
  -webkit-box-flex:1;
  -webkit-flex:1;
  -ms-flex:1;
  flex:1;
  width:100%;
  overflow:auto;/* winphone8和android4+ */
  -webkit-overflow-scrolling: touch; /* ios5+ */
}