自适应高度的问题，采用 Div + CSS 进行三列或二列布局时，事先不知道具体高度，只能根据内容的增减自适应高度，要使两列（或三列）的高度相同。网上有很多种做法，大都采用背景图填充或JS 脚本的方法使高度相同，但我认为下面这个方法最容易理解，能在短时间内做出效果···

下面介绍采用“隐藏容器溢出”和“正内补丁”和“负外补丁”结合的方法

主要代码：
#wrap{overflow:hidden;} /*外容器*/
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;} /*列*/
完整例子代码：
<meta c http-equiv="Content-Type" /><style type="text/css">
<!--
#wrap{overflow:hidden;}
#sidebar_left,#sidebar_right{padding-bottom:100000px;margin-bottom:-100000px;}
--></style></p>
<div id="wrap" style="width: 300px; background: #ffff00">
<div id="sidebar_left" style="width: 100px; background: #ff0000; float: left">Left</div>
<div id="sidebar_mid" style="width: 100px; background: #666; float: left">Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
Middle<br />
</div>
<div id="sidebar_right" style="width: 100px; background: #0000ff; float: right">Right</div>
</div>
在 IE5.5、IE6、FF1.5、Opera9 测试通过。

背景图填充方法

制作一张背景图,根据几列浮动DIV的宽度,在背景图相应位置设置不同的背景,然后设置父DIV的背景为{background-repeat:repeat-y}样式
如:
假设两列DIV,第一列宽200px,背景为红色,第二列宽400px,背景为蓝色,则做一张背景图,左边200px红色,右边400px为蓝色,图片宽600p.
代码如下:

<div style="background-image:url(此处为背景图片地址);background-repeat:repeat-y;">
  <div style="widht:200px;float:left;">左边</div>
  <div style="widht:400px;float:left;">右边<br/>右边<br/>右边</div>
  <div style="clear:both;"></div>
</div>

JS 脚本方法

代码如下:
<div style="widht:200px;float:left;" id="leftDiv">左边</div>
<div style="widht:400px;float:left;" id="rightDiv">右边<br/>右边<br/>右边</div>

<script type="text/javascript">
function $(id)
{
return document.getElementById(id);
}
window.onload=function(){
$('rightDiv').offsetHeight>$('leftDiv').offsetHeight?$('leftDiv').style.height=$('rightDiv').offsetHeight('rightDiv').style.height=$('leftDiv').offsetHeight;
}
</script>