CSS_贴在底部的布局

先看代码:

 <div id="wrap"> <div id="main" class="clearfix"> <div id="content"> content </div> <div id="side"> side </div> </div> </div> <div id="footer"> footer </div>

<mce:style type="text/css"><!-- div { border:1px solid #CCCCCC;} 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 */ --></mce:style><style type="text/css" mce_bogus="1">div { border:1px solid #CCCCCC;} 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 */</style>

 

 

基本原理:

    把footer放在Wrap的外面,并把Wrap的高度设为100%;

    footer使用相对定位,向上浮动本身的高度(margin-top: -150px; );

    为防止内容被覆盖,Wrap里面的内容容器设置为padding-bottom: 150px,让出位置;