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（頁尾部分)
下面我們一起來看看這種方法的實作原理：
和
<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>
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中文網其他相關文章！
