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