CSS创建各栏同高的多栏布局
作者：袖梨
2022-07-02
关于我的个人网站被问到最多的问题是：
你是怎么让右边这一栏的背景色一直向下扩展的？
这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。
垂直伸展
CSS有一些多少让人感到沮丧的特性，比如元素在垂直方向上只按照它确实需要的长度来伸展。也就是说，如果把一个200像素高的图片放在一个
中，这个
只会伸展到200像素高。
当你用
当你用
把你的标签分开（译者按，指结构化地创建XHTML代码），然后应用CSS创建一个分栏布局的时候，事情会变得有趣而两难。其中有一栏可能会比另一栏长一些（图1）。由于栏高取决于栏内包含的内容总量，所以创建一个两栏高度相同但颜色不同的分栏式布局就变得有一些困难。
图1
有一些方法可以使竖栏在垂直方向上看起来都一样长，而不用考虑它们包含的内容。在这里和大家分享我自己的解决方案（和使用绝对定位的布局配合使用），这是一个非常非常……简单的方法。同样的技巧也在其他地方使用着，包括A List Apart（译者按，ALA目前并没有使用这种方法，也许改版过了，下同）。
骗术
整个方案的秘密其实很简单，用一个纵向平铺的背景图片来造成着色的分栏假像。以SimpleBits（作者的网站，译者按）为例，我创建了一个如图2所求的背景图片。最左边是一个装饰图案，它的右边是一段很宽的白色区域（用于内容栏），接着一个一像素的边框，然后是淡棕色的背景（用于侧边栏），最右边又是装饰图案，它是最左边装饰图案的水平翻转。
图2
整个图片只有几像素高，但是当它纵向平铺后，将创建一个一直伸展到页面底部的着色分栏结构——无论栏内的内容孰长孰短。
CSS
这条基本的CSS规则将被添加到body元素。background: #ccc url(bg_birch_800.gif) repeat-y 50% 0;
本质上来说，我们把整个页面的背景设为灰色，并且只在垂直方向上平铺背景图片（repeat-y）。“50% 0”设置了背景图片的定位——在本例中，从浏览器的左边50%（使图片居中）并且从顶部0像素处开始平铺。
栏定位
放好背景图片后，把竖栏定位到顶部，左侧栏和后侧栏都有它们自己的内外补丁，请保证它们呆在了正确的地方——在背景图片创建的假竖栏之内（图3）。
图3
还有一件重要的事情需要提及，如果任意一个竖栏有边框、内补丁和外补丁，我们需要针对IE/Win的盒模型Bug做一些补救，请参考Tantek Celik的Box Model Hack或Mid Pass Filter。
图1
有一些方法可以使竖栏在垂直方向上看起来都一样长，而不用考虑它们包含的内容。在这里和大家分享我自己的解决方案（和使用绝对定位的布局配合使用），这是一个非常非常……简单的方法。同样的技巧也在其他地方使用着，包括A List Apart（译者按，ALA目前并没有使用这种方法，也许改版过了，下同）。
骗术
整个方案的秘密其实很简单，用一个纵向平铺的背景图片来造成着色的分栏假像。以SimpleBits（作者的网站，译者按）为例，我创建了一个如图2所求的背景图片。最左边是一个装饰图案，它的右边是一段很宽的白色区域（用于内容栏），接着一个一像素的边框，然后是淡棕色的背景（用于侧边栏），最右边又是装饰图案，它是最左边装饰图案的水平翻转。
图2
整个图片只有几像素高，但是当它纵向平铺后，将创建一个一直伸展到页面底部的着色分栏结构——无论栏内的内容孰长孰短。
CSS
这条基本的CSS规则将被添加到body元素。background: #ccc url(bg_birch_800.gif) repeat-y 50% 0;
本质上来说，我们把整个页面的背景设为灰色，并且只在垂直方向上平铺背景图片（repeat-y）。“50% 0”设置了背景图片的定位——在本例中，从浏览器的左边50%（使图片居中）并且从顶部0像素处开始平铺。
栏定位
放好背景图片后，把竖栏定位到顶部，左侧栏和后侧栏都有它们自己的内外补丁，请保证它们呆在了正确的地方——在背景图片创建的假竖栏之内（图3）。
图3
还有一件重要的事情需要提及，如果任意一个竖栏有边框、内补丁和外补丁，我们需要针对IE/Win的盒模型Bug做一些补救，请参考Tantek Celik的Box Model Hack或Mid Pass Filter。
