这篇博客探讨了HTML5中固定宽度的居中布局方法，特别关注是否需要全屏大背景的情况。内容涵盖了有无边栏的各种布局，如单侧边栏、双侧边栏和无边栏布局，并提供了相应的HTML结构示例。通过引入`inner`类，简化了处理边距、边框和内填充的复杂性，以实现更灵活的宽度调整。
先睹为快
固定宽度的居中布局
首先我们这里探讨的是我们常用的固定宽度的居中布局，这应该是目前实战中应用的最多的了。然后从考虑是否应用大背景上我们分为两种，一种是允许整体有一个大背景，一种是头部，中间及底部都可以平铺一个全屏的大背景。接着我们从有无边栏来讨论三种情况，一种是有左或右边栏，一种是没有边栏，最后一种就是左右边栏都存在的情况。我们在这探讨的布局方案借鉴与drupal的主题，所以如果是学过drupal这个cms的朋友应该会比较熟悉。
html结构详解
我们使用html5标签，所以有必要针对ie6-8导入html5.js。然后我们设置把所有的结构都包含在一个class为page的div里面，在这里div中我们还需要加上布局的class，aside-left,aside-right,two-sides,no-side分别对应左边栏，右边栏，左右两栏，没有边栏布局,这里我们以两栏布局为例，总共包括五个区域，分别为header，left，content，right，footer区域，每个区域里面我们增加了一层class为inner的div，这个inner主要是用来辅助我们布局，默认我们inner设置了margin左右的各位10px，可以根据实际需要来覆写。
我们说了这个是用来辅助我们布局的，很多时候我们布局的时候不得不考虑border及左右的margin，padding等，现在我们完全把这些抛在脑后，交给我们的inner来完成。如整个宽度为1000px，左右边栏各为200px，而内容为600px。我们以前的思想应该是左右为200px，然后中间内容就是580px（margin为10px）或560px（margin为20px），这样我们如果需要改为980px，我们又得改好几个值，然后如果我们左右边栏要加个边框，又变成了202px，或者要设置左右宽度为198px，这是多么的纠结啊。现在引入inner，我们在布局的时候直接计算宽度不需要考虑border，margin，padding什么的，然后通过对各个区域里面的inner重新覆写，不就搞定了吗。这里贴出左右两栏的html代码供参考。具体的请看下面的demo。
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>aside left & right demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css" media="all" />
<!--[if lt IE 9]>
<script src="js/html5.js" type="text/javascript"></script>
<![endif]-->
</head>
<body>
把下面内容拷贝进来
</body>
</html>通用样式在最下面
如果需要为header，container及footer部分各设计一个全屏的背景，上面的这个肯定是不行的了，我们可以这三个div外面再加一层wrap，而这个wrap就是全屏的。
左边栏布局
HTML:
<div class="page aside-left">
<!--header begin-->
<header id="header" class="clearfix">
<div class="inner">
<h1>header区域</h1>
<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</p>
</div>
</header>
<!--container begin-->
<section id="container" class="clearfix">
<!--aside_left begin-->
<section id="aside_left" class="aside">
<div class="inner">
<h2>左边栏区域</h2>
<ul>
<li>君子博学而日参省乎己，则知明而行无过矣。</li>
<li>神莫大于化道，福莫长于无祸</li>
<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
</ul>
</div>
</section>
<!--main begin-->
<section id="main">
<div class="inner">
<h2>内容区域</h2>
<article>
<p>学恶乎始？恶乎终？曰：其数则始乎诵经，终乎读礼；其义则始乎为士，终乎为圣人， 真积力久则入，学至乎没而后止也。故学数有终，若其义则不可须臾舍也。为之，人也；舍 之，禽兽也。故书者，政事之纪也；诗者，中声之所止也；礼者，法之大分，类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也，乐之中和也，诗书之博也，春秋之微 也，在天地之间者毕矣。君子之学也，入乎耳，着乎心，布乎四体，形乎动静。端而言，蝡而动，一可以为法则。小人之学也，入乎耳，出乎口；口耳之间，则四寸耳，曷足以美七尺之躯哉！古之学者为己，今之学者为人。君子之学也，以美其身；小人之学也，以为禽犊。故不问而告谓之傲，问一而告二谓之囋。傲、非也，囋、非也；君子如响矣。</p>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</p>
</article>
</div>
</section>
</section>
<!--footer begin-->
<footer id="footer">
<div class="inner">
<h2>footer区域</h2>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得。</p>
</div>
</footer>
</div>
右边栏布局
HTML:
<div class="page aside-left">
<!--header begin-->
<header id="header" class="clearfix">
<div class="inner">
<h1>header区域</h1>
<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</p>
</div>
</header>
<!--container begin-->
<section id="container" class="clearfix">
<!--main begin-->
<section id="main">
<div class="inner">
<h2>内容区域</h2>
<article>
<p>学恶乎始？恶乎终？曰：其数则始乎诵经，终乎读礼；其义则始乎为士，终乎为圣人， 真积力久则入，学至乎没而后止也。故学数有终，若其义则不可须臾舍也。为之，人也；舍 之，禽兽也。故书者，政事之纪也；诗者，中声之所止也；礼者，法之大分，类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也，乐之中和也，诗书之博也，春秋之微 也，在天地之间者毕矣。君子之学也，入乎耳，着乎心，布乎四体，形乎动静。端而言，蝡而动，一可以为法则。小人之学也，入乎耳，出乎口；口耳之间，则四寸耳，曷足以美七尺之躯哉！古之学者为己，今之学者为人。君子之学也，以美其身；小人之学也，以为禽犊。故不问而告谓之傲，问一而告二谓之囋。傲、非也，囋、非也；君子如响矣。</p>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</p>
</article>
</div>
</section>
<!--aside_right begin-->
<section id="aside_right" class="aside">
<div class="inner">
<h2>右边栏区域</h2>
<ul>
<li>君子博学而日参省乎己，则知明而行无过矣。</li>
<li>神莫大于化道，福莫长于无祸</li>
<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
</ul>
</div>
</section>
</section>
<!--footer begin-->
<footer id="footer">
<div class="inner">
<h2>footer区域</h2>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得。</p> </div>
</footer>
</div>左右两边栏布局
HTML:
<div class="page two-asides">
<!--header begin-->
<header id="header" class="clearfix">
<div class="inner">
<h1>header区域</h1>
<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</p>
</div>
</header>
<!--container begin-->
<section id="container" class="clearfix">
<!--aside_left begin-->
<section id="aside_left" class="aside">
<div class="inner">
<h2>左边栏区域</h2>
<ul>
<li>君子博学而日参省乎己，则知明而行无过矣。</li>
<li>神莫大于化道，福莫长于无祸</li>
<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
</ul>
</div>
</section>
<!--main begin-->
<section id="main">
<div class="inner">
<h2>内容区域</h2>
<article>
<p>学恶乎始？恶乎终？曰：其数则始乎诵经，终乎读礼；其义则始乎为士，终乎为圣人， 真积力久则入，学至乎没而后止也。故学数有终，若其义则不可须臾舍也。为之，人也；舍 之，禽兽也。故书者，政事之纪也；诗者，中声之所止也；礼者，法之大分，类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也，乐之中和也，诗书之博也，春秋之微 也，在天地之间者毕矣。君子之学也，入乎耳，着乎心，布乎四体，形乎动静。端而言，蝡而动，一可以为法则。小人之学也，入乎耳，出乎口；口耳之间，则四寸耳，曷足以美七尺之躯哉！古之学者为己，今之学者为人。君子之学也，以美其身；小人之学也，以为禽犊。故不问而告谓之傲，问一而告二谓之囋。傲、非也，囋、非也；君子如响矣。</p>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</p>
</article>
</div>
</section>
<!--aside_left begin-->
<section id="aside_left" class="aside">
<div class="inner">
<h2>右边栏区域</h2>
<ul>
<li>君子博学而日参省乎己，则知明而行无过矣。</li>
<li>神莫大于化道，福莫长于无祸</li>
<li>故言有招祸也，行有招辱也，君子慎其所立乎！</li>
</ul>
</div>
</section>
</section>
<!--footer begin-->
<footer id="footer">
<div class="inner">
<h2>footer区域</h2>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得。</p>
</div>
</footer>
</div>无边栏布局
HTML:
<div class="page no-aside">
<!--header begin-->
<header id="header" class="clearfix">
<div class="inner">
<h1>header区域</h1>
<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</p>
</div>
</header>
<!--container begin-->
<section id="container" class="clearfix">
<!--main begin-->
<section id="main">
<div class="inner">
<h2>内容区域</h2>
<article>
<p>学恶乎始？恶乎终？曰：其数则始乎诵经，终乎读礼；其义则始乎为士，终乎为圣人， 真积力久则入，学至乎没而后止也。故学数有终，若其义则不可须臾舍也。为之，人也；舍 之，禽兽也。故书者，政事之纪也；诗者，中声之所止也；礼者，法之大分，类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也，乐之中和也，诗书之博也，春秋之微 也，在天地之间者毕矣。君子之学也，入乎耳，着乎心，布乎四体，形乎动静。端而言，蝡而动，一可以为法则。小人之学也，入乎耳，出乎口；口耳之间，则四寸耳，曷足以美七尺之躯哉！古之学者为己，今之学者为人。君子之学也，以美其身；小人之学也，以为禽犊。故不问而告谓之傲，问一而告二谓之囋。傲、非也，囋、非也；君子如响矣。</p>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</p>
</article>
</div>
</section>
</section>
<!--footer begin-->
<footer id="footer">
<div class="inner">
<h2>footer区域</h2>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得。</p>
</div>
</footer>
</div>全屏无边栏布局
HTML:
<div class="page no-aside">
<!--header begin-->
<div id="header_wrap">
<header id="header" class="clearfix">
<div class="inner">
<h1>header区域</h1>
<p>青，取之于蓝，而青于蓝；冰，水为之，而寒于水。</p>
</div>
</header>
</div>
<!--container begin-->
<section id="container" class="clearfix">
<!--main begin-->
<section id="main">
<div class="inner">
<h2>内容区域</h2>
<article>
<p>学恶乎始？恶乎终？曰：其数则始乎诵经，终乎读礼；其义则始乎为士，终乎为圣人， 真积力久则入，学至乎没而后止也。故学数有终，若其义则不可须臾舍也。为之，人也；舍 之，禽兽也。故书者，政事之纪也；诗者，中声之所止也；礼者，法之大分，类之纲纪也。故学至乎礼而止矣。夫是之谓道德之极。礼之敬文也，乐之中和也，诗书之博也，春秋之微 也，在天地之间者毕矣。君子之学也，入乎耳，着乎心，布乎四体，形乎动静。端而言，蝡而动，一可以为法则。小人之学也，入乎耳，出乎口；口耳之间，则四寸耳，曷足以美七尺之躯哉！古之学者为己，今之学者为人。君子之学也，以美其身；小人之学也，以为禽犊。故不问而告谓之傲，问一而告二谓之囋。傲、非也，囋、非也；君子如响矣。</p>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得，圣心备焉。故不积跬步，无以至千里；不积小流，无以成江海。骐骥一跃，不能十步；驽马十驾，功在不舍。锲而舍之，朽木不折；锲而不舍，金石可镂。蚓无爪牙之利，筋骨之强，上食埃土，下饮黄泉，用心一也。蟹六跪而二螯，非蛇鳝之穴无可寄托者，用心躁也。</p>
</article>
</div>
</section>
</section>
<!--footer begin-->
<div id="footer_wrap">
<footer id="footer">
<div class="inner">
<h2>footer区域</h2>
<p>积土成山，风雨兴焉；积水成渊，蛟龙生焉；积善成德，而神明自得。</p>
</div>
</footer>
</div>
</div>CSS code（以上都含有）
/*reset*/
html {
height: 100%;
}
body {
background-color: #FFFFFF;
color: #404040;
font: 12px/1.5 Helvetica,Arial,sans-serif;
height: 100%;
margin: 0;
padding: 0;
text-align: center;
}
h1, h2, h3, h4, h5, h6, p, blockquote, form, fieldset {
margin: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input, select, label {
vertical-align: middle;
}
img {
border: medium none;
}
a {
text-decoration: none;
}
p {
padding: 0 0 9px;
}
h1, h2 {
line-height: 36px;
}
h3 {
line-height: 27px;
}
h4, h5, h6 {
line-height: 18px;
}
h1 {
font-size: 24px;
}
h2 {
font-size: 20px;
}
h3 {
font-size: 16px;
}
h4 {
font-size: 14px;
}
h5, h6 {
font-size: 12px;
}
ul, ol {
margin: 0 0 18px;
padding: 0;
}
ul li, ol li {
margin-left: 25px;
}
ul ul, ul ol, ol ol, ol ul {
margin-bottom: 0;
}
ul.nostyle {
list-style: none outside none;
}
ul.nostyle li {
margin-left: 0;
}
ul.inline-style {
list-style: none outside none;
margin-bottom: 0;
}
ul.inline-style li {
display: inline;
float: left;
margin-left: 0;
}
dl {
margin-bottom: 18px;
}
dt {
font-weight: bold;
}
dd {
margin: 0 0 0 9px;
padding: 0;
}
article, aside, dialog, figure, footer, header, hgroup, nav, section {
display: block;
}
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
overflow: hidden;
}
.clearfix {
}
/*layout*/
.page {
height: auto !important;
min-height: 100%;
min-width: 1000px;
width: 100%;
}
#header, #container, #footer {
clear: both;
margin: 0 auto;
text-align: left;
width: 1000px;
}
#container {
padding: 20px 0;
}
#main, #aside_right, #aside_left {
float: left;
}
.inner {
margin: 0 10px;
}
#main {
width: 1000px;
}
#aside_left {
width: 300px;
}
.aside-left #main {
width: 700px;
}
.aside-right #main {
width: 700px;
}
#aside_right {
width: 300px;
}
.two-asides #aside_left, .two-asides #aside_right {
width: 200px;
}
.two-asides #main {
width: 600px;
}
/*style*/
#header {
background-color: #EDEDED;
}
#header_wrap {
background-color: #EDEDED;
}
#footer {
background-color: #E1DACF;
}
#footer_wrap {
background-color: #E1DACF;
}
#container {
background-color: #CCCCCC;
}
#main {
background-color: #FFFFFF;
}
#aside_left, #aside_right {
background-color: #EFEFEF;
}
扫一扫
2070
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
