1. 页面居中
HTML
<div class="wrap"> </div><!-- end wrap -->
CSS
.wrap { width:960px; margin:0 auto;}
2. 固定页脚（不通过绝对定位使页脚始终固定在底部）
HTML
<div id="wrap"> <div id="main" class="clearfix"> </div> </div> <div id="footer"> </div>
CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | * { margin:0; padding:0; } html, body, #wrap { height: 100%; } body > #wrap {height: auto; min-height: 100%;} #main { padding-bottom: 150px; } /* must be same height as the footer */ #footer { position: relative; margin-top: -150px; /* negative value of footer height */ height: 150px; clear:both; } /* CLEAR FIX*/ .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 */ |
