Web网页布局多列等高之Sliding Faux Columns

     当网页的布局有很多列时，由于Div的高度依赖于内容的多少，所以经常会发生多列不等高的情况。如果各列的背景色不一样会很难看。有很多方法可以实现等高效果。本文将介绍Sliding Faux Columns方法。该方法英文的介绍很多，在此主要贴本人使用的代码。

    Sliding Faux Columns主要通过为父Div设置背景色来实现各列等高效果。在布局完成并确定Color Scheme之后，运用任何一种画图工具，化一个长条形的图像，注意长度保持和container一致，用不同的颜色分段，于各列的背景色对应。背景图像以及两列的HTML代码如下：

            

<div id="container" class="container">
		<div id="content">
			<p>The site you designed for RPM Music was a big hit. Sam, the
				store owner, has received such good feedback that he wants to extend
				his reach and create a new site called SampleRate that offers
				coverage of the local music scene—and he wants you to design his new
				website. The thing is, Sam has got it in his head that he wants the
				new site to be part of the 9Rules Music network
				(http://9rules.com/music). If this new site is chosen to be part of
				the network, it would mean a lot of exposure for the store and the
				site (and you as a designer).</p>
			<p>The site you designed for RPM Music was a big hit. Sam, the
				store owner, has received such good feedback that he wants to extend
				his reach and create a new site called SampleRate that offers
				coverage of the local music scene—and he wants you to design his new
				website. The thing is, Sam has got it in his head that he wants the
				new site to be part of the 9Rules Music network
				(http://9rules.com/music). If this new site is chosen to be part of
				the network, it would mean a lot of exposure for the store and the
				site (and you as a designer).</p>
			<p>The site you designed for RPM Music was a big hit. Sam, the
				store owner, has received such good feedback that he wants to extend
				his reach and create a new site called SampleRate that offers
				coverage of the local music scene—and he wants you to design his new
				website. The thing is, Sam has got it in his head that he wants the
				new site to be part of the 9Rules Music network
				(http://9rules.com/music). If this new site is chosen to be part of
				the network, it would mean a lot of exposure for the store and the
				site (and you as a designer).</p>
		</div>
		<div id="sidebar">
			<p>The site1 you designed for RPM Music was a big hit. Sam, the
				store owner, has received such good feedback that he wants to extend
				his reach and create a new site called SampleRate that offers
				coverage of the local music scene—and he wants you to design his new
				website. The thing is, Sam has got it in his head that he wants the
				new site to be part of the 9Rules Music network
				(http://9rules.com/music). If this new site is chosen to be part of
				the network, it would mean a lot of exposure for the store and the
				site (and you as a designer).</p>
		</div>
	</div>

    先上没有配置背景的CSS代码和效果

#container {
	width: 950px;
	margin: 0 auto;
}

#container #content {
	width: 641px;
	float: left;
	background: #fff;
}

#container #sidebar {
	width: 309px;
	float: right;
	background: #008040;
}

   为container添加背景色：

#container {
	width: 950px;
	margin: 0 auto;
	overflow: auto;
	background: url(images/green.png) repeat-y;
}

#container #content {
	width: 641px;
	float: left;
	background: #fff;
}

#container #sidebar {
	width: 309px;
	float: right;
	background: #008040;
}

   通过以上设置背景的方式可以巧妙的实现两列等高的效果，至于多列的情况使用相同的手段即可。