DIV +CSS区块自适应高度

Published by 小野大神 on April 5, 2008 at 12:05 pm in LAMP. 55 Comments Tags: , .

做主题遇到这个问题.假设下面区块:

  1. <div id="page">
  2.    <div id="content"></div>
  3.    <div id="sidebar"></div>
  4. </div>
  5. <div id="footer">
  6. </div>

经典的二栏+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列时才有效!!,如果反过来呢?

我从现在使用的主题里找到了解决方法

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

把 back.jpg这个图片颜色设为Sidebar背景色,宽度设为和Sidebar宽度相等(sidebar有margin的话相应减去),从右上方开始填充!,那么就正好覆盖Sidebar块所在的整个列.

这应该是最佳方案了

55 Responses to “DIV +CSS区块自适应高度”

Feed for this Entry
Comments are currently closed.