CSS创建各栏同高的多栏布局

　　关于我的个人网站被问到最多的问题是：

　　你是怎么让右边这一栏的背景色一直向下扩展的？

　　这确实是个很简单的问题，也许你也已经相当熟悉，但很多人还不知道。下面介绍的技术是一个简捷的小技巧，它一定可以帮助你解决这个头痛的问题。

垂直伸展

　　CSS有一些多少让人感到沮丧的特性，比如元素在垂直方向上只按照它确实需要的长度来伸展。也就是说，如果把一个200像素高的图片放在一个<div>中，这个<div>只会伸展到200像素高。

　　当你用<div>把你的标签分开（译者按，指结构化地创建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。

　　作为选择，如果border和padding能够被同时避免而只使用margin，那么Box Model Hack就不必要了。如果栏内的内容只是简单地定位在页面的顶部（并且是透明的），那么也可以简单地避免Box Model Hack。

无论是什么浮动了你的船

　　在我自己的网站上，我使用了绝对定位来创建两栏布局，但是如果你使用float属性来创建也会获得同样良好的结果（就像ALA一样）。

　　两种情况都使用了同样的思想方法：平铺背景图片，然后把竖栏浮动到适当的位置把假的背景栏（Faux-Column）覆盖。

结语

　　这是一个很简单的概念，但可以帮助减轻很多设计师在创建基于CSS的布局时经常碰到的痛苦。

　　感谢Jeffrey Zeldman帮忙精炼了这篇文章。

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有