經典的”粘連”footer佈局

參考文章連結在文章末尾，簡單的語言總結如下：

經典的“粘連”footer佈局就是。我們有一塊內容<main>。當<main>的高度足夠長的時候，緊跟在<main>後面的元素<footer>會跟在<main>元素的後面。當<main>元素比較短的時候（比如小於螢幕的高度），我們期望這個<footer>元素能夠“粘連”在螢幕的底部。如下圖所示：

當main足夠長時

當main比較短時

上面佈局的實現方法在參考文章中已經有提到。下面主要探討我們專案中遇到的情況：

我們需要實現的佈局就是 按鈕“提交”所在的區域能夠自由伸縮。當螢幕較低時，最就是“提交”按鈕和表單所在的區域接觸或者有一定的間隙。 示例圖就是下面的：

當螢幕足夠高的時候

當螢幕比較低的時候

上面的佈局在移動端需要考慮以下因素對佈局的影響：

1. 安卓上鍵盤彈起會對absolute和fixed產生影響；
2. 我們的絕對定位的元素是使用的bottom相對於螢幕的底部定位；

為了解決以上的兩個問題的解決方案：

1. 使用正常文件流的元素包裹絕對定位的元素；
2. 絕對定位元素的父級元素應該有一個min-height防止，父級元素太低時，絕對定位元素“溢位”父級元素；(min-height >= 絕對定位元素 + bottom)；

根據“粘連”footer佈局的思想，結合彈性盒佈局。我們需要的這種佈局可以有兩種方式，分別介紹如下：

1.使用vh單位

先來了解下vh和vw這兩個單位。

1. vh相對於視口的高度。視口被均分為100單位的vh。
2. vw相對於視口的寬度。視口被均分為100單位的vw。

上面兩個單位通俗的意義就是在css中獲取當前螢幕的高度和寬度（不通過js計算）。

示例程式碼如下：

css程式碼如下：

以上就是完全使用css來實現我們專案中佈局的方法，但是這個方法有一個很明顯的缺點就是vh單位的相容性問題。相容列表如下：

因為相容性問題，純css的方法在我們的專案中使用還是不現實。但是我們想下問題的本質：在使用彈性盒的基礎上，我們唯一需要做的就是知道彈性盒元素的高度（就是我們專案中螢幕的高度）。

2.js簡單計算滿足相容問題。

就是在dom樹渲染完成以後給body設定高度未螢幕的高度。為了避免不必要的“重繪”或者是“重排”在head標籤中新增如下js。

使用 jQuery 或者是 Zepto 的方法，仍然在head標籤中新增如下js。

所以在我們的專案中結合彈性盒佈局和新增簡單的動態js計算螢幕的高度。就可以完美實現我們專案中需要的佈局。

參考文章：

因為是一個

cssstickyfooter.com
ryanfait.com/sticky-footer
css-tricks.com/snippets/css/sticky-footer
pixelsvsbytes.com/blog/2011/09/sticky-css-footers-the-flexible-way
mystrd.at/modern-clean-css-sticky-footer

---