CSS建立各欄同高的多欄布局

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幫忙精鍊了這篇文章。