如何解決IOS 下固定定位fixed 失效問題？
相信大家在做移動端項目時都會遇到fixed失效的問題，在這里我們說的是在ios 下 ，頭部底部都采用固定定位時，滑動中心部分時整個頁面都跟着滾動也就是說固定定位失效了。那么如何解決這個問題呢？這里有個小訣竅分享給大家。
<body>
<!-- fixed定位的頭部 -->
<div class="header">
</div>
<!-- 可以滾動的區域 -->
<div class="main">
<div class="content">
<!-- 內容區域 -->
</div>
</div>
<!-- fixed定位的底部 -->
<footer class="footer">
<input type="text" placeholder="請輸入姓名">
</footer>
</body>
.header,.footer,.main{
display: block;
}
.header {
position: fixed;
top:0;
left: 0;
right:0;
height:100px;
}
.footer {
position: fixed;
bottom: 0;
left: 0;
right:0;
height: 30px;
}
.main{
/*main絕對定位，進行內部滾動*/
position: absolute;
/*top是頭部的高度*/
top: 100px;
/*bottom是底部的高度*/
bottom: 30px;
/*使之可以滾動*/
overflow-y: scroll;
/*增加彈性滾動,解決滾動不流暢的問題*/
-webkit-overflow-scrolling:touch;
}
.main .content{
height:2000px;
}
- 另外,代碼中header和footer采用的是fixed定位，如果考慮到更老一些的iOS系統不支持fixed，完全可以吧fixed換成absolute。