8.21.2008

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 實際上要複雜一些,不過基本上就是這個原理。

1 則留言:

Joshua 提到...

這個範例相當有趣,但我不完全了解,可否給我sample code會比較好了解
謝謝您