一、stick footer 布局介紹

文檔包括內(nèi)容區(qū)與頁(yè)腳區(qū)。當(dāng)內(nèi)容高度未達(dá)到視口的高，頁(yè)腳一直在視口最底部。當(dāng)內(nèi)容高度達(dá)到或者超出視口的高，頁(yè)腳一直在內(nèi)容下方

解決方案

一、calc 目前最主流方案

容器100vh - 頁(yè)腳的高 （100vh:視口的高）

二、padding-bottom

給body、html設(shè)置高度 100%，給內(nèi)容區(qū)設(shè)置最小高度 min-height：100%。頁(yè)腳想在視口顯示，則給其margin-top 負(fù)的自身高度。（其實(shí)頁(yè)腳是占了內(nèi)容的自身高度的）為解決內(nèi)容區(qū)高度超過視口高，會(huì)與頁(yè)腳重合問題，給內(nèi)容區(qū)的子元素一個(gè)padding-bottom：頁(yè)腳的高。

三、思路與第二個(gè)一樣，解決內(nèi)容區(qū)高度超過視口高，會(huì)與頁(yè)腳重合問題：

給內(nèi)容內(nèi)部專門一個(gè)空子元素讓其高度與頁(yè)腳一致。這樣與頁(yè)腳重合時(shí)，在視覺上是沒有問題的。