來自國外的設計達人，純css，可以實現:當正文內容很少時，底部位於視窗最下面。當改變視窗高度時，不會出現重疊問題。甚至，創造該css的人還專門成立乙個**介紹這個css底部布局方案。不知道他有沒有去申請專利:)
"wrap">
"main" class="clearfix">
"content">
css的簡單在於它易學，css的困難在於尋找更好的解決方案。在css的世界裡，似乎沒有完美這種說法。所以，現在介紹的css絕對底部，只是目前個人見過的方案中比較完美的吧。 先說我們為什麼會使用到這個css底部布局解決方案: 當做乙個頁面時，如果頁面內容很少，不足於填充一屏的視窗區域，按普通的布局，就會出現下面中的樣子(也就是底部內容並沒有位於視窗的底部，而留下了大量空白。
"side">
對於追未完美的設計師來說，這是不美觀的。網上有一些解決方案，但會出現當改變視窗高度時，底部和正文重疊的bug。儘管沒有多少人會有事沒事兒的去改變視窗高度，但設計嘛，追求的就是盡善盡美。下面是我找到的乙個比較完美的方法，來自國外的設計達人，純css，可以實現: 當正文內容很少時，底部位於視窗最下面。當改變視窗高度時，不會出現重疊問題。甚至，創造該css的人還專門成立乙個**介紹這個css底部布局方案。不知道他有沒有去申請專利:)
"footer">
臥槽複製**
by nono on 2017-04-13
做過網頁開發的同學想必都遇到過這樣尷尬的排版問題：
在主體內容不足夠多或者未完全載入出來之前，就會導致出現（圖一）的這種情況，原因是因為沒有足夠的垂直空間使得頁尾推到瀏覽器視窗最底部。但是，我們期望的效果是頁尾應該一直處於頁面最底部（如圖二）：
筆者最近在專案中也遇到過這樣的場景，在尋找最佳解決方案的過程中，了解到了 「sticky footer」 這個名詞。
本文將帶大家重新認識這個常見的網頁效果，以及一些可行的實現方案。
所謂 「sticky footer」，並不是什麼新的前端概念和技術，它指的就是一種網頁效果：
如果頁面內容不足夠長時，頁尾固定在瀏覽器視窗的底部；如果內容足夠長時，頁尾固定在頁面的最底部。
總而言之，就是頁尾一直處於最底，效果大致如圖所示：
當然，實現這種效果的方法有很多種，其中有通過指令碼計算的，有通過 css 處理的，指令碼計算的方案我們不在本文**。
下面我們看看有哪些通過 css 可以實現且適用於移動端開發的方案，並分析其中的利弊。
假設我們頁面的 html 結構是這樣：
"content">
"footer">
複製**
實現方案一：absolute
通過絕對定位處理應該是常見的方案，只要使得頁尾一直定位在主容器預留佔位位置。
html, body
position: relative;
min-height: 100%;
padding-bottom: 50px;
box-sizing: border-box;
}.footer 複製**
padding-bottom需要與 footer 的height一致。
實現方案二：calc
通過計算函式 calc 計算（視窗高度 - 頁尾高度）賦予內容區最小高度，不需要任何額外樣式處理，**量最少、最簡單。
.content
.footer 複製**
calc()以及vh單位的相容情況，這是個很理想的實現方案。
同樣的問題是 footer 的高度值需要與 content 其中的計算值一致。
實現方案三：table
通過 table 屬性使得頁面以**的形態呈現。
html, body
display: table;
width: 100%;
min-height: 100%;
}.content 複製**
筆者不建議使用這個方案。當然，問題也是可以解決的：別把其他樣式寫在 table 上。
實現方案四：flexbox
flexbox 是非常適合實現這種效果的，使用 flexbox 實現不僅不需要任何額外的元素，而且允許頁尾的高度是可變的。
雖然大多數 flexbox 布局常用於水平方向布局，但別忘了實際上它也可用於垂直布局，所以你需要做的是將垂直部分包裝在乙個 flex 容器中，並選擇要擴充套件的部分，他們將自動占用其容器中的所有可用空間。
html
body
.content 複製**
flex的相容寫法。
以上幾種實現方案，筆者都在專案中嘗試過，每個實現的方法其實大同小異，同時也都有自己的利弊。
其中有的方案存在限制性問題，需要固定頁尾高度；其中有的方案需要新增額外的元素或者需要 hack 手段。同學們可以根據頁面具體需求，選擇最適合的方案。
當然，技術是不斷更新的，也許還有很多不同的、更好的方案。但相信大家最終目都是一樣的，為了更好的使用者體驗！
參考資料：
相對完美的CSS絕對底部
css的簡單在於它易學，css的困難在於尋找更好的解決方案。在css的世界裡，似乎沒有完美這種說法。所以，現在介紹的css絕程式設計客棧對底部，只是目前個人見過的方案中比較完美的吧。css的簡單在於它易學，css的困難在於尋找更好的解決方案。在css的世界裡，似乎沒有完美這種說法。所以，現在介紹的c...
Sticky footer經典布局 絕對底部布局
原文 於 我們常見的網頁布局方式一般分為header 頁頭 部分,content 內容區 部分和footer 頁尾 部分。當頁頭區和內容區的內容較少時，頁尾區不是隨著內容區排布而是始終顯示在螢幕的最下方。當內容區的內容較多時，頁尾能隨著文件流撐開始終顯示在頁面的最下方。這就是傳說中的sticky f...
用CSS實現定位DIV絕對位於網頁底部
網上有一些解決方案，但會出現當改變視窗高度時，底部和正文重疊的bug。儘管沒有多少人會有事沒事兒的去改變視窗高度，但設計嘛，追求的就是盡善盡美。下面是我找到的乙個比較完美的方法，來自國外的設計達人，純css，可以實現 當正文內容很少時，底部位於視窗最下面。當改變視窗高度時，不會出現重疊問題。甚至，創...