DIV의 자체 적응 높이와 등고

div가 고도와 좌우 등 높은 요구에 적응하기 위해서는 일반적으로 세 가지 방법이 있다.
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>