再谈DIV的高度自适应

关于div高度的自适应，一直是个让人头疼的问题，整理了一下以前总结的方法，仅表示我也玩过。

html code:

  
    

   
      1 
   
     <
   
     div 
   
     id
   
     ="container"
   
     >
   
     

   
      2 
   
     　　
   
     <
   
     div 
   
     id
   
     ="leftSide"
   
     >
   
     这边的高度自适应右侧的高度
   
     </
   
     div
   
     >
   
     

   
      3 
   
     　　
   
     <
   
     div 
   
     id
   
     ="rightSide"
   
     >
   
     

   
      4 
   
     　　　　
   
     <
   
     script 
   
     type
   
     ="text/javascript"
   
     >
   
     

   
      5 
   
     　　　　　　
   
     for
   
     (i
   
     =
   
     0
   
     ;i
   
     <
   
     10
   
     ;i
   
     ++
   
     ){

   
      6 
   
     　　　　　　　　document.write(i 
   
     +
   
      
   
     '
   
     <br>
   
     '
   
     );

   
      7 
   
     　　　　　　}

   
      8 
   
     　　　　
   
     </
   
     script
   
     >
   
     

   
      9 
   
     　　
   
     </
   
     div
   
     >
   
     

   
     10 
   
     
   
     </
   
     div
   
     >
  
    

可用的方法大概有以下四种：

1，用absolute设置一个足够高的高度，在父级元素中清除溢出的部分,具体的css code如下：

  
    

   
     1 
   
     #container
   
     {
   
      font-size
   
     :
   
     14px
   
     ;
   
      width
   
     :
   
     300px
   
     ;
   
      overflow
   
     :
   
     hidden
   
     ;
   
      border
   
     :
   
     3px solid blue
   
     ;
   
      margin
   
     :
   
     10px auto 0
   
     ;
   
      color
   
     :
   
     #fff
   
     ;
   
      position
   
     :
   
     relative
   
     ;
   
     }
   
     

   
     2 
   
     #leftSide
   
     {
   
      width
   
     :
   
     100px
   
     ;
   
      float
   
     :
   
     left
   
     ;
   
      height
   
     :
   
     200000px
   
     ;
   
      left
   
     :
   
     0
   
     ;
   
      top
   
     :
   
     0
   
     ;
   
      position
   
     :
   
     absolute
   
     ;
   
      background
   
     :
   
     gray
   
     ;
   
     }
   
     

   
     3 
   
     #rightSide
   
     {
   
      width
   
     :
   
     190px
   
     ;
   
      float
   
     :
   
     right
   
     ;
   
      text-align
   
     :
   
     center
   
     ;
   
      background
   
     :
   
     purple
   
     ;
   
     }
  
    

其实这种方法并没有真正的实现左右两个div等高，只是用了障眼法，利用container的overflow:hidden清除了左侧多余的部分，以达到视觉上左右等高的目的，虽然有“白猫黑猫，逮着老鼠就是好猫”的说法，但是笔者并不着重推荐这种方法，因为给父级元素添加relative，会带来很多不必要的麻烦，况且只能是设置absolute的一侧自适应另一侧的高度，并不能让两侧中任一侧去自由去适应另一侧！

2，负外补丁和正内补丁{margin-bottom:-(num)px;padding-bottom:(num)px;}相结合

  
    

   
     1 
   
     #container
   
     {
   
      font-size
   
     :
   
     14px
   
     ;
   
      width
   
     :
   
     300px
   
     ;
   
      overflow
   
     :
   
     hidden
   
     ;
   
      border
   
     :
   
     3px solid blue
   
     ;
   
      margin
   
     :
   
     10px auto 0
   
     ;
   
      color
   
     :
   
     #fff
   
     ;
   
     }
   
     

   
     2 
   
     #leftSide
   
     {
   
      width
   
     :
   
     100px
   
     ;
   
      float
   
     :
   
     left
   
     ;
   
      background
   
     :
   
     gray
   
     ;
   
      padding-bottom
   
     :
   
     9999px
   
     ;
   
      margin-bottom
   
     :
   
     -9999px
   
     ;
   
     }
   
     

   
     3 
   
     #rightSide
   
     {
   
      width
   
     :
   
     190px
   
     ;
   
      float
   
     :
   
     right
   
     ;
   
      text-align
   
     :
   
     center
   
     ;
   
      background
   
     :
   
     purple
   
     ;
   
      padding-bottom
   
     :
   
     9999px
   
     ;
   
      margin-bottom
   
     :
   
     -9999px
   
     ;
   
     }
  
    

3，利用javascript脚本实现动态设置高度

  
    

   
     1 
   
     <
   
     script type
   
     =
   
     "
   
     text/javascript
   
     "
   
     >
   
     

   
     2 
   
     　　
   
     var
   
      left 
   
     =
   
      document.getElementById(
   
     '
   
     leftSide
   
     '
   
     );

   
     3 
   
     　　
   
     var
   
      right 
   
     =
   
      document.getElementById(
   
     '
   
     rightSide
   
     '
   
     );

   
     4 
   
     　　
   
     if
   
     (left.offsetHeight
   
     >=
   
     right.offsetHeight){

   
     5 
   
     　　　　right.style.height 
   
     =
   
      left.offsetHeight 
   
     +
   
      
   
     '
   
     px
   
     '
   
     ; 

   
     6 
   
     　　}
   
     else
   
     {

   
     7 
   
     　　　　left.style.height 
   
     =
   
      right.offsetHeight 
   
     +
   
      
   
     '
   
     px
   
     '
   
     ;

   
     8 
   
     　　}

   
     9 
   
     
   
     <
   
     /
   
     script>
  
    

事实上，这种办法真正意义上实现了两侧等高，并且能让两侧中任一侧去自由去适应另一侧，但是其缺点就在于，只有当DOM加载完成后，才有会这样等高的效果，如果网速够快，这个漏洞可以忽略不计。

4，在父级元素中填充背景，css code如下：

  
    

   
     1 
   
     #container
   
     {
   
      font-size
   
     :
   
     14px
   
     ;
   
      width
   
     :
   
     300px
   
     ;
   
      overflow
   
     :
   
     hidden
   
     ;
   
      border
   
     :
   
     3px solid blue
   
     ;
   
      margin
   
     :
   
     10px auto 0
   
     ;
   
      color
   
     :
   
     #fff
   
     ;
   
      background
   
     :
   
     url(http://www.men-ideal.com/images/unit1030.jpg) repeat-y
   
     ;
   
      
   
     }
   
     

   
     2 
   
     #leftSide
   
     {
   
      width
   
     :
   
     100px
   
     ;
   
      float
   
     :
   
     left
   
     ;
   
      
   
     }
   
     

   
     3 
   
     #rightSide
   
     {
   
      width
   
     :
   
     190px
   
     ;
   
      float
   
     :
   
     right
   
     ;
   
      text-align
   
     :
   
     center
   
     }
  
    

目前，这种方法是最流行的，同样也是一种“欺骗性”的解决办法，不过除了多使用一张图片之外，都可以堪称完美，这也是笔者极力推荐的！