DIV的自适应高度

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>   
  • 留下回复