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

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

html:
<body>
<div class="wrapper">
      <header>header</header>
      <section>
       弹性滚动区域
      </section>
      <footer>footer</footer>
</div>
</body>

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+ */
}
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容