作為一個頁面仔你一定遇到過：當一個HTML頁面中含有較少的內容時，Web頁面的“footer”部分隨著飄上來，處在頁面的半腰中間，給視覺效果帶來極大的影響，讓你的頁面看上去很不好看，特別是現在寬屏越來越多，這種現象更是常見。那么如何將Web頁面的“footer”部分永遠固定在頁面的底部呢？先來看下下面的代碼吧
這是第一種方案，后面還有幾種
HTML代碼
<div class=”container”>
<div class=”header”>這是頭部</div>
<div class=”page clearfix”>
<div class=”left”>left sidebar</div>
<div class=”content”>main content</div>
<div class=”right”>right sudebar</div>
</div>
<div class=”footer”>footer section</div>
</div>
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;}
實現這頁腳永遠固定在頁面的底部，我們只需要四個div，其中div#container是一個容器，在這個容器之中，我們包含了div#header（頭部），div#page（頁面主體部分，我們可以在這個div中增加更多的div結構，如上面的代碼所示），div#footer（頁腳部分）
下面我們一起來看看這種方法的實現原理：
<html>和<body>標簽：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，不然會無法實現效果；
新聞熱點
疑難解答
