1、背景图填充
这是使用最广泛的一种做法,无 hacks,推荐使用:
2、采用脚本控制列的高度(一)
需要事先知道哪列的高度,以此为基准用脚本控制。
document.getElementById("sideleft").style.height=document.getElementById("sideright").scrollHeight "px"
上面的代码是以 sideright 的基准高度来控制 sideleft 的高度。
代码简单,但比较被动:
3、采用脚本控制列的高度(二)
不需要事先知道哪列的高度,脚本自动判定。
代码较复杂,有点延时:
4、采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。
hacks 比较多(主要是 opera 的),但轻易使用,推荐:
5、采用负的左右边界和相对定位
下面的例子能较好地解决列高度相同的问题。
三行二列布局,主要内容在左边,网页宽度 750px, 左列 580px, 右列 170px。
CSS 代码:
XHTML 代码:
从结构看,middle(使用的是左列希望的背景色)在最外面,宽度等于 sideleft 的宽度,往里一层是 sideright,其宽度为 170px, 浮动方向是右边。但其右面的边界是负的 170px,相当于将 sideright 拉向右面(右面紧贴着 middle 的右边)170px 的位置。而 sideleft 又是套在 sideright 里面的,其内容先于 sideright 出来,左边界是负的 580,相当于在 sideright 左边 580px,此时 sideleft 和 middle 位置重合。
优点:不需要背景图片,无 hacks,完全的自适应高度。
缺点:现在的代码只能左对齐。
演示:
(原文最后一个示例的代码有误,故您可以参照 Div + CSS 高度自适应解决方案这篇文章来理解。ITPOW编辑注)