DIV의 자체 적응 높이와 등고

7146 단어 직장div레저
div가 고도와 좌우 등 높은 요구에 적응하기 위해서는 일반적으로 세 가지 방법이 있다.
1. 시뮬레이션 배경은 부모 용기에 배경을 씌우고 수직으로 순환하여 가상을 시뮬레이션하는 것이다.
바로 A 세트 BC인데 BC가 부족한 부분은 A의 배경으로 대체한다.
 

  
  
  
  
  1. .side{overflow:hidden;background:#ddc;}  
  2. .left{float:left;width:40%;}  
  3. .right{float:right;width:60%;background:#cdd;}  
  4. <div class="side"> 
  5.     <div class="left">left</div> 
  6.    <div class="right">right<br /><br /><br /><br /> </div> 
  7. </div> 

2.JAVASCRIPT

  
  
  
  
  1. .main{overflow:hidden;background:#ddc;}  
  2. .left{float:left;width:40%;}  
  3. .right{float:right;width:60%;background:#cdd;}  
  4. <div class="main"> 
  5.     <div class="left">left</div> 
  6.    <div class="right">right<br /><br /><br /><br /> </div> 
  7. </div> 
  8. <script type="text/javascript"> 
  9. document.getElementById("right").style.height=document.getElementById("main").scrollHeight+"px";  
  10. document.getElementById("left").style.height=document.getElementById("main").scrollHeight-2+"px";  
  11. </script> 

3. 정padding 마이너스margin의 가장 큰 단점은 안에 닻을 놓을 수 없다는 것이다. 페이지가 돌면 닻을 만나면 닻 위의 페이지가 보이지 않는다.

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

좋은 웹페이지 즐겨찾기