參考移動web頁面支持彈性滾動的3個方案
html:
<body>
<div class="wrapper">
<header>header</header>
<section>
彈性滾動區(qū)域
</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+ */
}
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
