*{margin:0;padding:0;}html, body, #wrapper {height: 100%;font-size:12px;}#wrapper{width:100%;background:#777;}body > #wrapper {height:auto; min-height:100%;}#main {padding-bottom: 54px;min-width:960px;}/* 必须使用和footer相同的高度,最小宽度ie6中加JS解决 */#header{text-align:center;color:#fff;background:#333;}#inheader{width:960px;height:110px;line-height:110px;margin:0 auto;background:#CC9933;}h3{font-size:14px;line-height:50px;}#inheader p{font-size:12px;line-height:30px;}#footer { position: relative; margin-top: -54px; /* footer高度的负值 */ height: 54px;/* footer高度*/ width:100%; min-width:960px;/*最小宽度ie6中加JS解决*/ clear:both; background:#666; text-align:center; color:#fff;}#infoot{height:54px;line-height:54px;width:960px;margin:0 auto;background:#CC9966;}#footer p{line-height:26px;}#content{background:#999;width:960px;margin:0 auto;height:692px;}#content p{line-height:30px;padding:0 30px;color:#fff;}/*说明: 需要注意的就是#main的padding值、footer的高度和负margin值，需要保持一致。下面是著名的万能float闭合Clearfix 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 */
原创文章，作者：键盘游走者，如若转载，请注明出处：http://www.708034.com/2011/05/%e5%bc%b9%e6%80%a7%e5%9b%ba%e5%ae%bd%e5%b8%83%e5%b1%80/
图一废话少说，言归正传，我们就来制作一个这样的布局结构：首先构建结构层：
