CSS技巧 欄位自動互相適應高度

網頁設計版面中的欄位當有運用到背景圖時，為了整體視覺效果，常會遇到需要能夠互相適應高度（視覺上）的問題，而這對於 CSS 的確是個麻煩，當然這可以利用 JavaScript 去處理，但若不想靠程式時，只好利用一些小技巧去達到這個目的。

不同的需求通常有不同的解決方案，在這筆者以最近設計的 Opmsg 為例子（參考畫面），在這三欄的設計中，需求是中間欄位能夠自動適應左欄的高度，當中間欄位內容高度少於左欄時，其背景仍能高於左欄（參考畫面）。

首先把中、左兩欄合併定義成為一個欄位取名 #column-1 並 "float: left"，最右欄取名 #column-2 並 "float: right"，右欄由於打算讓它完全依內容決定高度，因此接下來依一般方式處理即可。

回過頭來，剛剛的 #column-1 先放置中間欄位的背景圖上半部，並將圖片靠上靠右，#column-1 底下再放置一個 div 取名 #bd，然後將中間欄位下半部的背景圖切大張（高度）一點，放置在 #column-1 #bd 靠下靠右，這時中間欄位雖然還沒切，但背景已經出來。

#column-1 #bd 底下再切出兩個欄位分別為 #left（float: left） 與 #right（float: right），而這裡的 #right 其實就等於擁有背景圖的中間欄位了。#left 左欄依前面 #column-1 的方式將背景圖放上基本上就大功告成。

在這個案例中，中間欄位的背景圖片放在最外層，因此在裡頭的左欄可以實際控制著中間欄位在視覺上的最小高度，雖然並非真的讓欄位互相適應高度，但還是可以滿足實際的視覺需求，有點像是在變把戲（trick）XD。

當然 opmsg 的 CSS 實際上要複雜一些，不過基本上就是這個原理。