作為乙個頁面仔你一定遇到過：當乙個html頁面中含有較少的內容時，web頁面的「footer」部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那麼如何將web頁面的「footer」部分永遠固定在頁面的底部呢？先來看下下面的**吧
這是第一種方案，後面還有幾種
html**
"container"
>
"header"
>這是頭部
"page clearfix"
>
"left"
>
left
sidebar
"content"
>main
content
"right"
>
right
right
sudebar
"footer"
>footer section
css**
html,body
.container
.header
.page
.footer
.left
.content
.right
right
.clearfix:after,
.clearfix:before
.clearfix:after
.clearfix
實現這頁尾永遠固定在頁面的底部，我們只需要四個div，其中div#container是乙個容器，在這個容器之中，我們包含了div#header（頭部），div#page（頁面主體部分，我們可以在這個div中增加更多的div結構，如上面的**所示），div#footer（頁尾部分）
和標籤：html和body標籤中必須將高度(height)設定為「100%」,這樣我們就可以在容器上設定百分比高度，同時需要將html,body的margin和padding都移除，也就是html,body的margin和padding都為0；
div#container容器：div#container容器必須設定乙個最小高度(min-height)為100％；這主要使他在內容很少（或沒有內容）情況下，能保持100％的高度，不過在ie6是不支援min-height的，所以為了相容ie6，我們需要對min-height做一定的相容處理，具體可以看前面的**，另外我們還需要在div#container容器中設定乙個」position:relative」以便於裡面的元素進行絕對定位後不會跑了div#container容器；
div#page容器：div#page這個容器有乙個很關鍵的設定，需要在這個容器上設定乙個padding-bottom值，而且這個值要等於（或略大於）頁尾div#footer的高度（height）值，當然你在div#page中可以使用border-bottom人水-width來替代padding-bottom，但有一點需要注意，此處你千萬不能使用margin-bottom來代替padding-bottom，不然會無法實現效果；
div#footer容器：div#footer容器必須設定乙個固定高度，單位可以是px(或em)。div#footer還需要進行絕對定位，並且設定bottom:0；讓div#footer固定在容器div#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，div#footer固定在螢幕的底部（因為div#container設定了乙個min-height:100%），當內容高度超過螢幕的高度，div#footer也固定在div#container底部，也就是固定在頁面的底部。你也可以給div#footer加設乙個」width:100%」，讓他在整個頁面上得到延伸；
其他div：至於其他容器可以根據自己需求進行設定，比如說前面的div#header,div#left,div#content,div#right等。
優點：
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的相容，並且也適應iphone。
缺點：
不足之處就是需要給div#footer容器設定乙個固定高度，這個高度可以根據你的需求進行設定，其單位可以是px也可以是em，而且還需要將div#page容器的padding-bottom（或border-bottom-width）設定大小等於（或略大於）div#footer的高度，才能正常執行。
這種方法是利用footer的margin-top負值來實現footer永遠固定在頁面的底部效果，下面我們具體看是如何實現的。
html**
header
left sidebar
main content
right sidebar
footer
css**
html,body
#contai
ner
#page
#header
#footer
#left
#conten
t
#right
.clearfix:after
* html .clearfix/* ie6 */
*:first-child html .clearfix /* ie7 */
上面的**是最基本的html code，同時你也發現了div#footer和div#container是同輩關係，不像方法一，div#footer在div#container容器內部。當然你也可以根據你的需要把內容增加在div#container容器中，如：乙個三列布局，而且還帶有header部分。
方法一和方法二有幾點是完全相同的，比如說方法一中的1-3三點，在方法二中都一樣，換句話說，方法二中也需要把html,body高度設定為100%,並重置margin,padding為0；其二div#container也需要設定min-height:100%,並處理好ie6下的min-height相容問題；其三也需要在div#page容器上設定乙個padding-bottom或border-bottom-width值等於div#footer高度值（或略大於）。那麼兩種方法不同之處是：
div#footer進行margin-top的負值設定，並且此值等於div#footer的高度值，而且也要和div#page容器的padding-bottom(或border-bottom-width)值相等。
優點：
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的相容。
缺點：
要給footer設定固定值，因此無法讓footer部分自適應高度。
pc端footer固定在底部
問題 在pc端中我們的底部導航如果內容不夠或者換了螢幕就會出現底部導航亂掉，我去調研了一些官網，發現有的他們的導航是沒有固定在底部的，而是隨著內容的減少，導航會自動的提公升到頁面的頂部，而有的導航是固定在底部的，無論你的內容有多少，它都是在你的底部，接下來我就直接上 header 11111 111...
將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...