相信大家在做移動端項目時都會遇到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: 100px; /*top是頭部的高度*/
bottom: 30px; /*bottom是底部的高度*/
overflow-y: scroll; /*使之可以滾動*/
webkit-overflow-scrolling:touch; /*增加彈性滾動,解決滾動不流暢的問題*/
}
/* .main .content內容部分，如果上述沒達到預期效果，就需要添加此樣式 */
.main .content{
height:2000px;
}
注意：
- 另外,代碼中header和footer采用的是fixed定位，如果考慮到更老一些的iOS系統不支持fixed，完全可以吧fixed換成absolute