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 Responses to “DIV +CSS区块自适应高度”


Comments are currently closed.