欢迎来到奇迪科技(深圳)有限公司,超值服务提供卓越产品!

Html教程

让footer(网页底部)绝对对齐网页底部

作者:admin来源:www.qvdv.com更新时间:2014-01-03

有很多时候,如果一个页面的主题内容比较少,那么网页的底部(网页最底部网站版权、备案信息的)就可能会网上移动,也就是不能够完全对齐页面的底部了。
该问题有办法解决,CSS代码如下:

html, body, #wrap {height: 100%;padding:0;margin:0;} 
body > #wrap {height: auto; min-height: 100%;}
*{margin: 0 auto;padding: 0;}
/*据对底部*/
#main {padding-bottom: 80px;}  /* 底部的高度 ,数值一致*/ 
#footer {
 position: relative; 
 margin-top: -80px; /* 底部高度的负数值 ,数值一致*/ 
 height: 80px; /*底部高度,数值一致*/
 text-align:center;
 clear: both;
 } 
/*兼容其它浏览器设置*/
.clearfix:after {
 content: "."; 
 display: block; 
 height: 0; 
 clear: both; 
 visibility: hidden;} 
.clearfix {
 display: inline-block;} 
* html .clearfix {
 height: 1%;} 
.clearfix {
 display: block;}

以下是html代码:

<div id="wrap"> 
<div id="main" class="clearfix"> 
这里是网页设置内显示的主体内容
</div>
</div>
<div id="footer">
这里是网页的页脚内容,这里的内容绝对对齐页面底部。
</div>

这里的演示代码,兼容各大浏览器,该技术文档代码来源于网络(无版权声明),仅供大家参考,在做网站前端设计的时候,可能用得着。

本文版权所有,转载须注明:来源 http://www.qvdv.com/index.php/qvdv-wdl-144.html