經典的「粘連」footer布局就是。我們有一塊內容。當的高度足夠長的時候，緊跟在後面的元素會跟在元素的後面。當元素比較短的時候（比如小於螢幕的高度），我們期望這個元素能夠「粘連」在螢幕的底部。如下圖所示：
當main足夠長時
當main比較短時
我們需要實現的布局就是按鈕「提交」所在的區域能夠自由伸縮。當螢幕較低時，最就是「提交」按鈕和表單所在的區域接觸或者有一定的間隙。示例圖就是下面的：
當螢幕足夠高的時候
當螢幕比較低的時候
上面的布局在移動端需要考慮以下因素對布局的影響：
安卓上鍵盤彈起會對absolute和fixed產生影響；
我們的絕對定位的元素是使用的bottom相對於螢幕的底部定位；
為了解決以上的兩個問題的解決方案：
使用正常文件流的元素包裹絕對定位的元素；
絕對定位元素的父級元素應該有乙個min-height防止，父級元素太低時，絕對定位元素「溢位」父級元素；(min-height >= 絕對定位元素 + bottom)；
根據「粘連」footer布局的思想，結合彈性盒布局。我們需要的這種布局可以有兩種方式，分別介紹如下：
先來了解下vh和vw這兩個單位。
vh相對於視口的高度。視口被均分為100單位的vh。
vw相對於視口的寬度。視口被均分為100單位的vw。
上面兩個單位通俗的意義就是在css中獲取當前螢幕的高度和寬度（不通過js計算）。
示例**如下：
你好
*
body
.item1
.item2
.item3
.btn-item
vh單位的相容性問題。相容列表如下：
因為相容性問題，純css的方法在我們的專案中使用還是不現實。但是我們想下問題的本質：在使用彈性盒的基礎上，我們唯一需要做的就是知道彈性盒元素的高度（就是我們專案中螢幕的高度）。
就是在dom樹渲染完成以後給body設定高度未螢幕的高度。為了避免不必要的「重繪」或者是「重排」在head標籤中新增如下js。
var callback = function();
//是否是頁面載入觸發繫結了事件
if ( document.readystate === "complete" || (document.readystate !== "loading" && !document.documentelement.doscroll) ) else
$(function())bodyyii 公共header和footer布局
1 head 應在頭部分呼叫。產生乙個佔位符，將與定位於頭部位置已註冊的 html 來代替。beginbody 應在 body 部分的開頭呼叫。觸發 event begin body 事件。產生將使用定位在 body 已註冊的html，將替換佔位符開始位置 endbody 應在 body 結束部分被...
footer貼在底部的布局
這個網頁即使內容很少的情況下，它也始終在頁面的底部。否則頁面底部將留下大量空白。footer位置自適應 div id wrap div id main class clearfix div id content cccdiv div id side sssdiv div div div id foo...
對Flex布局的總結與思考
閱讀本文之前最好對flex布局有基本了解，可以通過 參考資料 中列舉的資源來學習。一維布局模型 one dimensional layout model 元素項沿著水平或垂直方向來排列，就像一條沿著乙個方向的 流 與之對應的，css grid layout是乙個二維布局模型。兩者互為補充。空間分配 ...