fixed布局在ios中當頁面滾動的時候可能會出現一些奇怪的表現,比如fixed元素隨頁面滾動或者消失等等。
解決思路:
要把帶fixed定位的元素,和內容滾動的元素分開來,滾動部分設置絕對定位和overflow-y: scroll;使之自成一塊,這樣就不會出現頁面的滾動。沒有滾動,即使fixed失效也沒有問題。
<body>
<div class="header">頭部</div>
<div class="content">
<!-- 內容區域(可以滾動的區域) -->
</div>
<footer class="footer">
<!-- fixed定位的底部 -->
<input type="text" placeholder="請輸入姓名">
</footer>
</body>
.content {
/* 絕對定位,進行內部滾動 */
position: absolute;
top: 0; // 距離頭部高度
bottom: .6rem; // 距離底部高度
right:0;
left:0;
/* 使之可以滾動 */
overflow-y: scroll;
/* 增加該屬性,可以增加彈性 */
-webkit-overflow-scrolling: touch;
}
.footer {
position: absolute; // 也可用fixed
bottom: 0;
height: .6rem;
}
