div footer標籤css實作位於頁面底部固定

Web頁面的「footer」部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見,本文將介紹兩種解決方案，需要了解的朋友可以參考下

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

程式碼如下:

<p class="container"> 
<p class="header">这是头部</p> 
<p class="page clearfix"> 
<p class="left">left sidebar</p> 
<p class="content">main content</p> 
<p class="right">right sudebar</p> 
</p> 
<p class="footer">footer section</p> 
</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標籤中必須將高度(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" class="clearfix"> 
<p id="left">left sidebar</p> 
<p id="content">main content</p> 
<p id="right">right sidebar</p> 
</p> 
</p> 
<p id="footer">footer</p>

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實作位於頁面底部固定的詳細內容。更多資訊請關注PHP中文網其他相關文章！