ios關於fixed布局的解決思路


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;
}


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM