DIV +CSS區塊自適應高度

做主題遇到這個問題.假設下面區塊:

經典的二欄+Footer欄布局.content /sidebar區塊分別設置為 向左/右float即可.如果三列則兩列浮左,一列浮右.

通常這樣沒有問題.但如果給區塊加上background-color:(背景顏色),例如:

默認背景(page)白色
content 列,背景紅色
sidebar列: 背景黑色.

通常情況下,content 和sidebar的高度塊不會相等,那麼結果就會出現其中一列背景正常,而另一列上面是背景色,下面是白色!.

這個貌似是DOV+CSS下經典的自適應高度問題.我嘗試給 sidebar /content列加上 height: 100% ;和 min-height:100%,均無效. (不知道原因,手冊上說min-height百分比單位為參照父元素寬度) .

有看到一種方法:
page塊背景色:設為黑色
content 列,背景 紅色
sidebar列: 背景 黑色..
但這樣只有在Sidebar列高度超過 content列時才有效!!,如果反過來呢?

我從現在使用的主題里找到了解決方法

#page { background: url(“images/back.jpg”) repeat-y top right; }


把 back.jpg這個圖片顏色設為Sidebar背景色,寬度設為和Sidebar寬度相等(sidebar有margin的話相應減去),從右上方開始填充!,那麼就正好覆蓋Sidebar塊所在的整個列.

這應該是最佳方案了

55 Replies to “DIV +CSS區塊自適應高度”

Comments are closed.