参考移动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+ */
}
