作為一個頁面仔你一定遇到過：當一個html' target='_blank'>HTML頁面中含有較少的內容時，Web頁面的“footer”部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那么如何將Web頁面的“footer”部分永遠固定在頁面的底部呢？先來看下下面的代碼吧
這是第一種方案，后面還有幾種
HTML代碼

代碼如下:

 p >
CSS代碼 
代碼如下:
html,body{margin:0;padding:0;height:100%} .container{min-height:100%;height:auto !important;height:100%;/*ie6不識別min-height,如上述處理*/position:relative;} .header{background:#ff0;padding:10px;} .page{width:960px;margin:0 auto;padding-bottom:60px;/*padding等于footer的高度*/} .footer{position:absolute;bottom:0;width:100%;height:60px;/*footer的高度*/background:#6cf;clear:both;} .left{width:220px;height:800px;float:left;margin-right:20px;background:lime;} .content{background:orange;width:480px;float:left;margin-right:20px;} .right{width:220px;float:right;background:green;} .clearfix:after, .clearfix:before{content: display:table} .clearfix:after{clear:both;overflow:hidden} .clearfix{zoom:1;}

實現這頁腳永遠固定在頁面的底部，我們只需要四個p，其中p#container是一個容器，在這個容器之中，我們包含了p#header（頭部），p#page（頁面主體部分，我們可以在這個p中增加更多的p結構，如上面的代碼所示），p#footer（頁腳部分） 
下面我們一起來看看這種方法的實現原理： 
 html 和 body 標簽：html和body標簽中必須將高度(height)設置為“100%”,這樣我們就可以在容器上設置百分比高度，同時需要將html,body的margin和padding都移除，也就是html,body的margin和padding都為0； 

p#container容器：p#container容器必須設置一個最小高度(min-height)為100％；這主要使他在內容很少（或沒有內容）情況下，能保持100％的高度，不過在IE6是不支持min-height的，所以為了兼容IE6，我們需要對min-height做一定的兼容處理，具體可以看前面的代碼，另外我們還需要在p#container容器中設置一個”position:relative”以便于里面的元素進行絕對定位后不會跑了p#container容器； 
p#page容器：p#page這個容器有一個很關鍵的設置，需要在這個容器上設置一個padding-bottom值，而且這個值要等于（或略大于）頁腳p#footer的高度（height）值，當然你在p#page中可以使用border-bottom人水-width來替代padding-bottom，但有一點需要注意，此處你千萬不能使用margin-bottom來代替padding-bottom，不然會無法實現效果； 

p#footer容器：p#footer容器必須設置一個固定高度，單位可以是px(或em)。p#footer還需要進行絕對定位，并且設置bottom:0；讓p#footer固定在容器p#container的底部，這樣就可以實現我們前面所說的效果，當內容只有一點時，p#footer固定在屏幕的底部（因為p#container設置了一個min-height:100%），當內容高度超過屏幕的高度，p#footer也固定在p#container底部，也就是固定在頁面的底部。你也可以給p#footer加設一個”width:100%”，讓他在整個頁面上得到延伸； 
其他p：至于其他容器可以根據自己需求進行設置，比如說前面的p#header,p#left,p#content,p#right等。 
優點： 
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的兼容，并且也適應iphone。 
缺點： 
不足之處就是需要給p#footer容器設置一個固定高度，這個高度可以根據你的需求進行設置，其單位可以是px也可以是em，而且還需要將p#page容器的padding-bottom（或border-bottom-width）設置大小等于（或略大于）p#footer的高度，才能正常運行。 
方法二： 
這種方法是利用footer的margin-top負值來實現footer永遠固定在頁面的底部效果，下面我們具體看是如何實現的。 
HTML代碼 
代碼如下:
 p id= header header /p  p id= page >
CSS代碼 
代碼如下:
html,body{height:100%;margin:0;padding:0;} #container{min-height:100%;height:auto !important;height:100%;} #page{padding-bottom:60px;/*等于或者大于footer的高度*//*border-bottom-width:60px;邊框寬度也可以*/} #header{padding:10px;background:lime;} #footer{position:relative;margin-top:-60px;/*等于footer的高度*/height:60px;clear:both;background:#c6f;} #left{width:18%;float:left;margin-right:2%;background:orange;} #content{width:60%;float:left;margin-right:2%;background:yellow;} #right{width:18%;float:right;background:green;} .clearfix:after{visibility:hidden;height:0;font-size:0;display:block;content: clear:both;} * html .clearfix{zoom:1;}/* ie6 */ :first-child+html .clearfix{zoom:1;} /* ie7 */
上面的代碼是最基本的HTML Code，同時你也發現了p#footer和p#container是同輩關系，不像方法一，p#footer在p#container容器內部。當然你也可以根據你的需要把內容增加在p#container容器中，如：一個三列布局，而且還帶有header部分。 

方法一和方法二有幾點是完全相同的，比如說方法一中的1-3三點，在方法二中都一樣，換句話說，方法二中也需要把html,body高度設置為100%,并重置margin,padding為0；其二p#container也需要設置min-height:100%,并處理好IE6下的min-height兼容問題；其三也需要在p#page容器上設置一個padding-bottom或border-bottom-width值等于p#footer高度值（或略大于）。那么兩種方法不同之處是： 
p#footer放在p#container容器外面，也就是說兩者是同級關系，如果你有新元素需要放置在與p#container容器同級，那你需要將此元素進行絕對定位，不然將會破壞p#container容器的min-height值； 
p#footer進行margin-top的負值設置，并且此值等于p#footer的高度值，而且也要和p#page容器的padding-bottom(或border-bottom-width)值相等。 
優點： 
結構簡單清晰，無需js和任何hack能實現各瀏覽器下的兼容。 
缺點： 
要給footer設置固定值，因此無法讓footer部分自適應高度。
以上就是div footer標簽css實現位于頁面底部固定的詳細內容，html教程        
鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。