DIV高度自适应解决方法汇总

两个DIV高度自适应解决方法汇总：

我们经常会碰到左右两个DIV高度不能自适应的问题，今天在这里整理一下各种解决方法：

网站优化（seo）中，提到过网站样式的优化，即在网站的布局设计中，采用DIV+CSS来布局。网站制站中，我们经常要把两个并排显示的div实现一样高的效果，即每列高度（事先并不能确定哪列的高度）的相同，有以下几种方法：

[color=#B22222]       1、JS实现（判断2个div高）；
       2、纯css方法；
       3、加背景图片实现[/color]。

    div+css基本布局：[separator]

[code]<div id="box">
  <div id="left"></div>
  <div id="right"></div>
</div>[/code]

    1、js实现div自适应高度

代码如下：

[code]<script type="text/javascript">
  <!--
  window.onload=window.onresize=function(){
  if(document.getElementById("right").clientHeight<document.getElementById("left").clientHeight){
  document.getElementById("right").style.height=document.getElementById("left").offsetHeight+"px";
  }
  else{
  document.getElementById("left").style.height=document.getElementById("right").offsetHeight+"px";
  }
  }
  -->
</script>[/code]

    （注：网上公布了不少方法，但代码或多或少有错；上面的是无错代码；上面的代码在IE6.0/IE7.0/FF下通过，并没有在opera下测试。个人认为这个方法比较完善）事实上，这种办法真正意义上实现了两侧等高，并且能让两侧中任一侧去自由去适应另一侧，但是其缺点就在于，只有当DOM加载完成后，才有会这样等高的效果，如果网速够快，这个漏洞可以忽略不计。

效果：
[html]



  
  
  
  
  
  
  


  


[/html]
演示下载：[url][attach]244[/attach][/url]

[file][attach]244[/attach][/file]


    [b]2、纯CSS方法（两种）[/b]

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

    css里代码（IE下测试通过，但不会显示div下边框，即border-bottom）：

[code]/*左右自适应相同高度start*/
#left,#right
{
  padding-bottom: 32767px !important;
  margin-bottom: -32767px !important;
}
@media all and (min-width: 0px) {
  #left,#right
  {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
  }
  #left:before, #right:before
  {
    content: '[DO NOT LEAVE IT IS NOT REAL]';
    display: block;
    background: inherit;
    padding-top: 32767px !important;
    margin-bottom: -32767px !important;
    height: 0;
  }
}
/*左右自适应相同高度end*/[/code]

           2）、 用absolute设置一个足够高的高度，在父级元素中清除溢出的部分,具体的代码如下：

[code]
  <style>
    #container{font-size:14px;width:300px;overflow:hidden;border:3px solid gray;margin:10px auto 0;color:#fff;position:relative;}
    #leftSide{background:#f50;width:100px;float:left;position:absolute;height:200000px;}
    #rightSide{width:190px;float:right;text-align:center;background:purple;}
  </style>
    <div id="container">
        <div id="leftSide">这边的高度自适应右侧的高度</div>
        <div id="rightSide">
                <script type="text/javascript">
                for(i=0;i<10;i++){  
                document.write(i+'<br>');  
                }  
            </script>
        </div>
    </div>
[/code]
       其实这种方法并没有真正的实现左右两个div等高，只是用了障眼法，利用container的overflow:hidden清除了左侧多余的部分，以达到视觉上左右等高的目的，虽然有“白猫黑猫，逮着老鼠就是好猫”的说法，但是笔者并不着重推荐这种方法，因为给父级元素添加relative，会带来很多不必要的麻烦，况且只能是设置absolute的一侧自适应另一侧的高度，并不能让两侧中任一侧去自由去适应另一侧！

    [b]3、加背景图片[/b]

    这个方法，很多大网站在使用，如163，sina等。

    XHTML代码：


[code]<div id="box">
    <div id="left">这是第一列</div>
    <div id="right">这是第二列</div>
    <div class="clear"></div>
</div>[/code]

    CSS代码:

[code]#box{ width:776px; background:url(bg.gif) repeat-y 300px;}
#left{ float:left; width:300px;}
#right{ float:right; width:476px;}
.clear{ clear:both;}[/code]