flex上下固定中间滚动布局
传统 pc 端中，⼦容器⾼度超出⽗容器⾼度，通常使⽤ overflow:auto 可出现滚动条拖动显⽰溢出的内容，⽽移动web开发中，由于浏览器⼚商的系统不同、版本不同，导致有部分机型不⽀持对弹性滚动，从⽽在开发中制造了所谓的 BUG。
上图如果在PC端中，我们可以利⽤ position:fixed 和 overflow:auto 进⾏简单的布局实现我们需要的效果，⽽在⼿机端遇到的问题如下：ios4 和 android2.2 以下不⽀持 position:fixed
ios 和 android2.3 以下不⽀持 overflow:auto
ios4 和 android 不⽀持 overflow-scrolling
最严重的结果是：滚动区域内容⽆法拖动
对于 ios4 和 android2.2 以下不⽀持 position:fixed 的问题，有2种布局⽅法可以替代。
布局⼀：定义页⾯整体⾼度为100%，然后使⽤ position:absolute 布局可解决
/*
<!--absolute布局 [[ -->
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
<!--absolute布局 ]] -->
*/
html的flex布局
html,body{height:100%;}
.wrap{width:100%;}
.header,.footer{height:40px;line-height:40px;background-color:#D8D8D8;text-align:center;}
.header{position: absolute;top:0;left:0;width:100%;}
.footer{position: absolute;bottom:0;left:0;width:100%;}
.main{position:absolute;z-index:1;top:40px;left:0;bottom:40px;width:100%;}
布局⼆：定义页⾯整体⾼度为100%，然后使⽤ display:flex 布局可解决
/*
<!-- flex布局 [[ -->
<body>
<div class="wrap">
<div class="header">header</div>
<div class="main">
弹性滚动区域
</div>
<div class="footer">footer</div>
</div>
</body>
<!-- flex布局 ]] -->
*/
html,body{height:100%;}
.
wrap{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;}
.main{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;width:100%;}
那么剩下的主要问题是⼦容器⾼度超出⽗容器⾼度，⼦容器内容如何弹性滚动。
对于如何使⽤弹性滚动，这⾥并没有最好的⽅案，具体看产品的⽤户、产品的定位等，简单介绍下：
⽅案⼀： overflow:auto和-webkit-overflow-scrolling: touch
适合场景：产品的⽤户⼤多为 ios5+、android4+ ⽤户，建议采⽤ overflow-scrolling 做差异化体验，毕竟 iscroll4.js 在 android 机器下体验不顺畅，另外还加载了 10K 多的 js 代码。
overflow:auto 写法在 winphone8 和 android4+ 上有⽤。ios5+ 版本增加了⼀个新的属性：overflow-scrolling 这个属性可以激活平滑滚动，效果不错。
.css{
overflow:auto;/* winphone8和android4+ */
-webkit-overflow-scrolling: touch; /* ios5+ */
}
flex体验demo：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。