在一个布局中，假设有导航元素和内容元素，切给他们都分别应用了背景，理想情况下，背景应该拉长到整个布局的最大高度，从而形成列的效果，但是实际上，因为导航元素没有扩展到最大高度，所以它们的背景不会拉长，如图所示，左边的导航的灰色背景的高度没有达到最大高度。
解决方法：为创建列的效果，需创建一个伪列，即在一个占据布局最大高度的元素上应用重复的背景效果——faux列。关键在于创建合适的背景图片。
固定宽度的布局
只需在容器元素上应用一个垂直重复的背景图像，其宽度与导航区域相同。为固定宽度的布局设计faux列是很容易的，因为知道列的尺寸和位置。
#wrapper{
background: #fff url() repeat-y left top;
}
流式布局
流式布局有点复杂，因为列的尺寸和位置随着浏览器窗口缩放而变化，技巧是按百分比对背景图像进行定位。
- 使用像素设置背景的位置：图像的左上角会定位在距离元素左上角指定像素数的地方。
- 使用百分数定位：会对图像上的对应点进行定位，例如：将垂直和水平位置设置为20%，那么实际上会把图像上距离左上角20%的点定位到父元素上距离左上角20%的位置。
例如需要创建如下图的布局：左边导航为次内容区，占总内容区的25%，右边为主内容区，主内容区中左边为主内容区，占主内容区的72.82%，右边为次内容区。
简单代码如下：
<div class="wrapper">
<div class="inner-wrapper">
<div class="content">
<div class="primary">
<div class="primary"> </div>
<div class="secondary"> </div>
</div>
<div class="secondary"> </div>
</div>
</div>
</div>
<style>
.wrapper{
width:76.8%; /*960÷1250=76.8%*/
margin:0 auto;
text-align:left;
min-width : 62em; /*比较小的窗口尺寸，布局太挤，所以添加以em为单位的min-width*/
max-width : 125em; /*设置为em为单位的max-width是为了确保文本行的长度适合阅读*/
}
.content .primary{
width : 72.82%; /*670÷920=72.82% ，因为在wrapper设置了水平居中，所以40px均匀分布在content容器两侧各20px*/
float:right;
display:inline;
}
.content .secondary{
width:25%; /*230÷920=25%*/
float:left;
display:inline;
}
.content .primary .primary{
width:59.7%; /*400÷670=59.7%*/
float:left;
display:inline;
}
.content .primary .secondary{
width:34.33%; /*230÷670=34.33%*/
padding-right:3%; /*20÷670=3% 设置内边距，避免其包含的文本紧挨着元素的右边缘*/
float:right;
display:inline;
}
</style>
上述代码实现了三列，但是并没有实现两侧的背景图像，下面步骤来逐步实现：
1.给次内容区创建faux列
- 先创建一个faux图像，4000px宽，5px高。
- 因次要内容区是总宽度的25%，所以在背景图像上创建宽25%的对应区域，即图像的faux列部分是宽为1000px的灰色，其余为白色。
- 图像的faux列的右边缘与图像的左边相距25%，次内容区的右边缘与容器的左边相距25%，所以如果把这个图像作为背景应用于容器，并将水平位置设置为25%，那么faux列的右边缘会正好与次内容区的右边缘对齐。
增加的代码为：
.wrapper{
background:#fff url(1.gif) repeat-y 25% 0;
}
2.为主内容区创建背景
- 先创建一个faux图像。
- 因主内容区1是主内容区总宽度的72.82%，所以在背景图像上创建宽72.82%的对应区域为白色，其余为灰色。
- 图像的faux列的左边缘与图像的左边相距72.82%，次内容区的左边缘与容器的左边相距72.82%，所以如果把这个图像作为背景应用于容器，并将水平位置设置为72.82%，那么faux列的左边缘会正好与次内容区的左边缘对齐。
- 因为在wrapper元素上已经应用了背景，所以需要添加一个容器元素，然后将该faux列的背景图像应用于这个新的容器元素，即inner-wrapper元素。
增加的代码为：
.inner-wrapper{
background:#fff url(2.gif) repeat-y 72.82% 0;
}
