DIV的自适应高度和等高

 为了达到div自适应高度和左右等高的要求一般有4种方法：
1.视觉模拟背景，就是父容器套个背景，垂直循环，来模拟一个假象。就是A套BC，BC不足的部分用A的背景替代。

.side{overflow:hidden;background:#ddc;} .left{float:left;width:40%;} .right{float:right;width:60%;background:#cdd;}

<div class="side"> <div class="left">left</div> <div class="right">right <br /> <br /> <br /> <br /> </div> </div>

2.JAVASCRIPT

 

  .main{overflow:hidden;background:#ddc;} .left{float:left;width:40%;} .right{float:right;width:60%;background:#cdd;}

<div class="main"> <div class="left">left</div> <div class="right">right <br /> <br /> <br /> <br /> </div> </div> <mce:script type="text/javascript"> <!-- document.getElementById("right").style.height=document.getElementById("main").scrollHeight+"px"; document.getElementById("left").style.height=document.getElementById("main").scrollHeight-2+"px"; // --></mce:script>

3.正padding负margin，最大的弊端就是里面不能放置锚点，页面跳转如若遇到锚点，则锚点上方的页面不会被显示 

 

.side{overflow:hidden;background:#ddc;} .left{float:left;width:40%;} .right{margin-bottom:-32767padding-bottom:32767float:right;width:60%;background:#cdd;}

<div class="side"> <div class="left">left</div> <div class="right">right <br /> <br /> <br /> <br /> </div> </div>

4.相对位置法

<div style="border-right: solid 180px #f00; background: #000; color: #fff" mce_style="border-right: solid 180px #f00; background: #000; color: #fff"> <div style="width: 180px; float: right; position: relative; right: -180px;"> 右边的<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> </div> <div style="clear: both; height: 0; overflow: hidden;"> 左边的 </div> </div>