1.背景图填充
这是使用最广泛的一种做法，无hacks，推荐使用：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

2.采用脚本控制列的高度（一）
需要事先知道哪列的高度，以此为基准用脚本控制。
document.getElementById(\"sideleft\").style.height=document.getElementById(\"sideright\").scrollHeight \"px\"
上面的代码是以sideright的基准高度来控制sideleft的高度。
代码简单，但比较被动：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

3.采用脚本控制列的高度（二）
不需要事先知道哪列的高度，脚本自动判定。
代码较复杂，有点延时：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

4.采用负的外边界和内补丁相结合
不需要事先知道哪列的高度。
hacks比较多（主要是opera的），但轻易使用，推荐：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

5.采用负的左右边界和相对定位
下面的例子能较好地解决列高度相同的问题。
三行二列布局，主要内容在左边，网页宽度750px,左列580px,右列170px。
CSS代码：

Example Source Code []

#middle{
width: 580px;
float:left;
background:#FFFFFF;
text-align:left;
}
#sideleft{
width: 580px;
float: left;
position:relative;
margin-left:-580px;
}
#sideright{
width: 170px;
float: right;
position:relative;
margin: 0 -170px 0 0;
background: #F0F0F0;
}

xhtml代码：

Example Source Code []

<div id=\"middle\">
<div id=\"sideright\">
<div id=\"sideleft\">
</div>
</div>
</div>

从结构看，middle（使用的是左列希望的背景色）在最外面，宽度等于sideleft的宽度，往里一层是sideright，其宽度为170px,浮动方向是右边。但其右面的边界是负的170px，相当于将sideright拉向右面（右面紧贴着middle的右边）170px的位置。而sideleft又是套在sideright里面的，其内容先于sideright出来，左边界是负的580，相当于在sideright左边580px，此时sideleft和middle位置重合。
优点：不需要背景图片，无hacks，完全的自适应高度。
缺点：现在的代码只能左对齐。
演示：

Source Code to Run []

[ 可先修改部分代码 再运行查看效果 ]

参考资料：