DIV的自适应高度

为了达到div自适应高度和左右等高的要求一般有3种方法：
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> 
	
<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";  
	
</script> 

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

	
.side{overflow:hidden;background:#ddc;}  
	
.left{float:left;width:40%;}  
	
.right{
margin-bottom:-32767
padding-bottom:32767
float:right;width:60%;background:#cdd;}  
	
<div class="side"> 
	
    <div class="left">left</div> 
	
   <div class="right">right<br /><br /><br /><br /> </div> 
	
</div>