移動端CSS底部固定和fixed定位在ios上的bug

fixed定位在ios上的bug

• css三欄布局

假設我們頁面的 HTML 結構是這樣：

 <div class="wrapper">
    <div class="content"><!-- 頁面主體內容區域 --></div>
    <div class="footer"><!-- 需要做到 Sticky Footer 效果的頁腳 --></div>
</div>

方法1.：absolute

通過絕對定位處理應該是常見的方案，只要使得頁腳一直定位在主容器預留占位位置。

 html, body {
    height: 100%;
}
.wrapper {
    position: relative;
    min-height: 100%;
    padding-bottom: 50px;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    bottom: 0;
    height: 50px;
}

這個方案需指定 html、body 100% 的高度，且 content 的 padding-bottom 需要與 footer 的 height 一致。

方法2：增加同級占位符

    <div>
        <div style="height:60px;">占位符(ps:假定footer高60px)</div>
        <section class="footer">
            <input type="button" value="確認添加"/>
        </section>
    </div>

方法3：通過計算函數 calc 計算（視窗高度 - 頁腳高度）賦予內容區最小高度，不需要任何額外樣式處理，代碼量最少、最簡單。

  .content {
    min-height: calc(100vh - 50px);
}
.footer {
    height: 50px;
}

如果不需考慮 calc() 以及 vh 單位的兼容情況，這是個很理想的實現方案。
同樣的問題是 footer 的高度值需要與 content 其中的計算值一致。

方法4：Flexbox

Flexbox 是非常適合實現這種效果的，使用 Flexbox 實現不僅不需要任何額外的元素，而且允許頁腳的高度是可變的。

雖然大多數 Flexbox 布局常用於水平方向布局，但別忘了實際上它也可用於垂直布局，所以你需要做的是將垂直部分包裝在一個 Flex 容器中，並選擇要擴展的部分，他們將自動占用其容器中的所有可用空間。

  html {
    height: 100%;
}
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
}
.content {
    flex: 1;
}

需要注意的是想要兼容各種系統設備，需要兼顧 flex 的兼容寫法。