DIV+CSS创建固定宽度布局-div固定在页面顶部

本文和大家重点讨论一下DIV+CSS如何创建固定宽度布局，这种方法与打印布局非常接近，对于包含很多大图片和其它元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局也是处理这种内容的最好方法。

固定宽度布局Div+CSS如何创建

用XHTML和CSS实现两列或三列页面布局的各个方面。到目前为止，所有例子都使用流式布局（也就是布局会自动扩展和适应浏览器窗口的宽度）。现在是时候考虑另外一种主要的页面布局方法了，这种布局方法是固定宽度布局。

很多Web构建人员倾向于使用固定宽度的布局进行页面设计，因为它们能生成精确且可预知的结果。这种方法与打印布局非常接近，对于设计人员和访问者来说都是一个很重要的舒适因素；另外，对于包含很多大图片和其它元素的内容，由于它们在流式布局中不能很好地表现，因此固定宽度布局也是处理这种内容的最好方法。

从table到div

近年来，设计人员都使用表（table）来创建固定宽度的布局。表的列和行是对设计人员的布局表格（grid）的一种可行的模拟，所以一点也不奇怪设计人员为什么采用HTML表来完成页面布局。

然而，基于表的布局有一个明显的问题。除了语义上不适合用表来进行布局之外，产生的代码也很混乱，难于阅读，甚至难于维护——尤其是在包含合并的表单元格（cell）和嵌套表时。

使用div进行页面布局效果要好得多。除了这是推荐使用的最佳方法之外，代码的装载速度会更快，也更易于处理。

表及其单元格的格式（formatting）属性被借用到固定宽度布局中，因为指定这些元素的尺寸相当简单。其实通过div可以做到同样的事情，只要确定div精确的维数并使用绝对和相对定位将这些div定位到页面上即可。

一个典型的固定宽度的布局，该布局由顶部的一个标题，一个三列内容的区域（主内容列，每侧有一个工具条），和页面底部的一个页脚所组成。所有元素的宽度都是固定的；在浏览器窗口发布变化时它们的尺寸都不会变化。

以下是将页面设计为固定宽度布局的CSS代码。

ExampleSourceCode

body{  
font-family:Verdana,Arial,Helvetica,sans-serif;  
font-size:12px;  
margin:0px;  
padding:0px;  
}  
h2,h3{  
margin-top:0px;  
padding-top:0px;  
}  
div#head{  
position:absolute;  
width:750px;  
height:100px;  
left:0px;  
top:0px;  
background-color:#FFFF66;  
}  
div#columns{  
position:relative;  
width:750px;  
top:100px;  
background-color:#CCCCCC;  
}  
div#side1{  
position:absolute;  
width:150px;  
top:0px;  
left:0px;  
background-color:#FF6666;  
}  
div#content{  
position:relative;  
width:450px;  
top:0px;  
left:150px;  
background-color:#999999;  
}  
div#side2{  
position:absolute;  
width:150px;  
top:0px;  
left:600px;  
background-color:#00FF66;  
}  
div#foot{  
position:relative;  
width:750px;  
clear:both;  
margin-top:100px;  
background-color:#99FFFF;  
}

#p#

分解代码

这段标记并不是特别地值得注意——只是在每个主要页面元素的外面（标题、页脚、工具条和主内容）包围着div。每个div有一个id，相应的CSS样式可以使用这个id引用它。只有一个额外的div（divid="columns"）包围着三列内容区域。在InternetExplorer中将页脚放在三列中最长一列的下面是必要的。

像平时用法一样，CSS代码完成所有的重要任务。首先它完成一些家务管理。Body样式将页面的边距设为零，h2,h3样式将默认间距设为零。否则的话，这该布局周围就会有一个边距，而在某些浏览器（比如Netscape和Mozilla）中标题将会在在主内容和页脚的上面产生一个空白区域。

◆样式div#head为标题div设置一个明确的高度和宽度。标题使用position:absolute,top:0px和left:0px规则显式地定位在页面的左上角。规则position:absolute是非常重要的，因为定位属性（top、left、right、bottom）在常规（静态）定位时会被忽略。然而要记住，任何绝对定位的元素都会从常规的页面流中被移除掉，而属于页面流的元素将会像绝对定位元素不存在一样被定位到页面上。

◆样式div#columns控制div的格式，使其充当三个列的容器。它使用position:relative创建属于常规页面流的一个元素（它会根据其内容进行扩展和适应，因而影响其它元素的定位），但是它将从其常规位置偏移。规则top:100px提供一个偏移量，将列容器向下推，使其覆盖标题。

◆规则div#side1控制第一个工具条列的样式。它设置该列的宽度（width:150px）并使用绝对定位将该列放置在其父元素的左上角。父元素是该列的div，如果该元素使用相对于body元素的相对定位，那么它将解释top:0px规则而非你所期望的100px设置。规则div#side2以同样的方式设置左工具条所用的列。div#side1和div#side2唯一不同之处是背景色和left:600px规则，后者将该列定位在其它两列的右边。

◆样式div#content中的主内容所用的列的样式控制与其它两列的样式控制相似。它显式地设计宽度（width:450px）并使用left:150px和top:0px规则在其父元素（包围着三个列的div）内定位该列。主要的不同之处在于position:relative规则。我们使用相对定位使主内容列可以影响其父元素（包围着三个列的div）的尺寸并因此影响页脚元素的尺寸。

◆样式div#foot设置页脚的宽度（width:750px），该样式还包含一个clear:both规则，该规则保证它接在其它元素下面，而不是旁边。由于它使用相对定位，所以它在页面上的位置是由其它元素的流所决定的，在这里具体是由包围着三个列的div所决定的。规则margin-top:100px是一个很重要的细节，它防止页脚被上面的列所覆盖。这些列在页面流中从它们的常规位置偏移，从而为绝对定位的标题以及需要相应偏移的页脚腾出空间。

在前面的基础上添加了一个标签（<divid="wrapper">）和一个相应的CSS样式后的结果。下面是新添加的CSS样式的代码：

ExampleSourceCode

div#wrapper{  
position:relative;  
margin-left:auto;  
margin-right:auto;  
top:20px;  
width:750px;  
background-color:#CCCCCC;  
}

这种方法之所以能用，是因为所有的布局div都是相对于它们的父元素相对定位的。

【编辑推荐】