html結構：
header
main content
footer
html
body
header
main/* main的padding-bottom值要等於或大於footer的height值 */
footer
其次，設定main（footer前乙個兄弟元素）的padding-bottom值大於等於footer的height值，以保證main的內容能夠全部顯示出來而不被footer遮蓋；
最後，設定footer絕對定位，並設定height為固定高度值。
html結構：
header
main content
footer
html,body
.container
header
main/* main的padding-bottom值要等於或大於footer的height值 */
footer/* margin-top（負值的）高度等於footer的height值 */
首先，設定.container的高度至少充滿整個螢幕；
其次，設定main（.container最後乙個子元素）的padding-bottom值大於等於footer的height值；
最後，設定footer的height值和margin-top負值。
這種方法沒有使用絕對定位，但html結構的語義化不如方法一中的結構清晰。
也可以設定負值的margin-bottom在.container上面，此時html結構變化如下：
header
main content
footer
html,body
.container
.empty,footer
雖然多了乙個空的div，語義上也不怎麼好，但是相比前面為main元素設定padding-bottom的方法有乙個明顯的好處：當網頁內容不滿一屏的時候，如果需要為main元素設定邊框、背景色的時候，padding-bottom硬生生地撐出了一片空白，真真是有點醜，但是加個空的div之後，布局方式作用在.empty上，對main的css設定就不影響了，算是乙個好處吧！
html結構：
header
main content
footer
html,body
header
main
footer
/* 動態為footer新增類fixed-bottom */
.fixed-bottom
$(function()
}footerposition();
$(window).resize(footerposition);
});
CSS實現footer固定在頁面底部
作為乙個頁面仔你一定遇到過 當乙個html頁面中含有較少的內容時，web頁面的 footer 部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將web頁面的 footer 部分永遠固定在頁面的底部呢？先來看下下...
將footer固定在頁面最下方
html結構 1 div id 2 div id id header 3header block 4div 5 div id id content 6content block 7div 8 div id id footer 9footer block 10div 11div css結構 1 htm...
footer固定在頁面底部的幾種方法
body header header header main content main footer footer footer body html body header main main的padding bottom值要等於或大於footer的height值 footer 首先，設定body的...