自适应DIV高度等高

利用margin-bottom负值与padding-bottom抵消法。

一、负margin-bottom

<title>左右两列高度互适应</title>
<style type="text/css">
#wrap{width:600px;margin:0 auto;overflow: hidden}
#left{width:300px;float:left;background:green;}
#right{width:300px;float:left;background:gray;}
.row{margin-bottom:-1000em;padding-bottom:1000em;}
#footer{width:600px;margin:0 auto;text-align:left;background:#f4dcd8;}
</style>
<div id="wrap">
<div id="left" class="row">
左侧</div>
<div id="right" class="row">
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
右侧<br>
</div>
</div>
<div id="footer">底部</div>
二、多列多模块padding-bottom抵消法

<meta charset="utf-8">
<title>多列多模块高度自适应</title>
<style type="text/css">
.main {overflow: hidden; width: 800px; margin: 0 auto;}
.left, .center, .right{float: left; width: 250px; overflow: hidden; margin-left:5px; }
.equal {padding-bottom: 1000em; margin-bottom: -1000em;zoom:1;}
.box {background: #f4dcd8; border: 1px #FB9D51 solid; padding-left:10px; }
.mt5 {margin-top: 5px;}
.bor_top { height:1px; background:#FB9D51; overflow:hidden; }
</style>


<div class="main">
<div class="left  equal">
  <div class="box">
   Left NO.1
  </div>
  <div class="box mt5">
   Left NO.2
  </div>
  <div class="box mt5">
   Left NO.3
  </div>
<div class="equal mt5 box">
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
   Left NO.4<br>
 </div>
</div>
  <div class="center equal">
  <div class="box">
   center NO.1<br>
   center NO.1<br>
   center NO.1<br>
  </div>
  <div class="box mt5">
   center NO.2<br>
  </div>
<div class="equal mt5 box">
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
   center NO.3<br>
  </div>
</div>
<div class="equal right">
  <div class="box">
   right NO.1
  </div>
  <div class="box mt5">
   right NO.2<br>
   right NO.2<br>
   right NO.2<br>
  </div>
  <div class="box mt5">
   right NO.3<br>
   right NO.3<br>
   right NO.3<br>
   right NO.3<br>
   right NO.3<br>
   right NO.3<br>
  </div>
  <div class="equal mt5 box">
   right NO.4<br>
   right NO.4<br>
   right NO.4<br>
   right NO.4<br>
   right NO.4<br>
   right NO.4<br>
   right NO.4<br>
  </div>
</div>
</div>
<div class="main"><div class="left bor_top"></div><div class="center bor_top"></div><div class="right bor_top"></div></div>