方法一：給html、body都設定100%的高度，確定body下內容設定min-height有效，然後設定主體部分min-height為100%，此時若沒有header、footer則剛好完美佔滿全屏（參考《div絕對居中、寬高自適應、多欄寬度自適應》），但是有了這兩個，只能另尋他路，由於高版本瀏覽器對box-sizing的支援，我們可以在100%的高度中通過padding給header、footer空出兩部分空白區域，再通過給header設定等同於自身高度的負值margin-bottom，給footer設定等同於自身高度的負值margin-top，就完美的把兩者移回可見區域，如此以來，既滿足content部分不滿一屏時footer在底部，又滿足了，超過一屏時footer被撐開的需求。
doctype html方法二：將footer以外的部分再用wrap包裹起來，內部設定padding-bottom，footer相同的使用margin-top，如此以來不用使用border-box；>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>footer始終處在底部
title
>
head
>
<
style
>
*html,body
header
section
footer
style
>
<
body
>
<
header
>
header
>
<
section
class
="content"
>
<
div
style
="height:1000px;"
>
div>
section
>
<
footer
class
="footer"
>
footer
>
body
>
html
>
doctype html三：相容更強>
<
html
lang
="en"
>
<
head
>
<
meta
charset
="utf-8"
>
<
title
>footer始終處在底部
title
>
head
>
<
style
>
*html,body
.wrap
.min
header
section
footer
style
>
<
body
>
<
div
class
="wrap"
>
<
div
class
="min"
>
<
header
>
header
>
<
section
class
="content"
>
<
div
style
="height:10px;"
>
div>
section
>
div>
div>
<
footer
class
="footer"
>
footer
>
body
>
html
>
CSS實現footer固定在頁面底部
作為乙個頁面仔你一定遇到過 當乙個html頁面中含有較少的內容時，web頁面的 footer 部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將web頁面的 footer 部分永遠固定在頁面的底部呢？先來看下下...
footer固定底部 HTMLCSS方法
charset utf 8 footer始終居於底部title type text css body 核心 html,body,wrap高度100 html,body,wrapage 外框高度自動，最小高度100 ie下高度100 wrapage 內容主體下padding 防止底部疊加 mainw ...
CSS 實現底部固定
在製作頁面有這樣一種現象 當乙個html頁面中含有較少的內容時，web頁面的 footer 部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將web頁面的 footer 部分永遠固定在頁面的底部呢？注意了這裡所...