CSS实例教程:永远在网页底部的网页布局

　　看这个网页的底部，为什么会跑到那儿去呢?即使内容很少的情况下，它也始终在页面的底部。

　　否则页面底部将留下大量空白。

　　下面是它实现的代码：

  

<div id="wrap">     <div id="main" class="clearfix">         <div id="content">         </div>         <div id="side">         </div>     </div> </div> <div id="footer"> </div> html, body, #wrap {height: 100%;} body > #wrap {height: auto; min-height: 100%;} #main {padding-bottom: 150px;}  /* 必须使用和footer相同的高度 */ #footer {position: relative;     margin-top: -150px; /* footer高度的负值 */     height: 150px;     clear:both;} 兼容性Hack： .clearfix:after {content: ".";     display: block;     height: 0;     clear: both;     visibility: hidden;} .clearfix {display: inline-block;} /* Hides from IE-mac */ * html .clearfix { height: 1%;} .clearfix {display: block;} /* End hide from IE-mac */

评论总数：0 条 [ 查看全部 ] 网友评论