jquery让两个div高度自动适应 不用再看别的方法了 这个最简单

这个问题今天可是整了我一上午，原本是打算用js实现，结果兼容性很难得处理．

最后选择了jquery，方法如下(这里是我推荐的方法),使用简单，兼容性好．只需要在页面中设置一句代码就搞定,这么好的东西所以把代码贴出来，供大家参考，另外，网上也有很多种方法，下面我也一一作了一个分析．大家可以看一下，不对请指正．谢谢．

?

function SetSameHeight(obj1,obj2)

{

     var h1 = $(obj1).Height(); //获取对象1的高度

     var h2 = $(obj2).Height();  //获取对象2高度

     var mh = Math.max( h1, h2); //比较一下

     $(obj1).height(mh); //重设高度，让两边div 高度保持一至

     $(obj2).height(mh);

}

在页面用调用：

?

jQuery(document).ready(function($) {

 

    SetSameHeight(".left",".line");

    SetSameHeight(".right_main",".line");//如果有３个div 就加这一行代码，再适应一次．

 

}

Html代码如下

?

<div class="main">

    <div class="left">

 

 

        左边 这边要高得多哦

<br> 

<br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br><br>  <br>  </div>

    <div class="line"></div>

     

    <div class="right_main">

      <p>这里是右边页面 </p>

    </div>

</div>

新手注意：页面中需要引用 jquery

?

<script type="text/javascript" src="jquery1.4.2.js"></script>

总结：

网上介绍的有几种方法，大概如下，我说一下我的看法：

1、JS实现（判断2个div高）；2、纯css方法；3、加背景图片实现

1.用普通的js实现，大多数只是支持ie，像opera和firefoxs还有google浏览器等都不支持，所以大家也不要选择这种了．兼容性问题．

2.纯css实现，主要是设置起来太麻烦了．css的兼容性我就没有测试了．

代码可以看一下这个：

?

#m1,#m2

{

padding-bottom: 32767px !important;

margin-bottom: -32767px !important;

}

@media all and (min-width: 0px) {

#m1,#m2

{

padding-bottom: 0 !important;

margin-bottom: 0 !important;

}

#m1:before, #m2:before

{

content: '[DO NOT LEAVE IT IS NOT REAL]';

display: block;

background: inherit;

padding-top: 32767px !important;

margin-bottom: -32767px !important;

height: 0;

}

}

3.对包括的主div层加背景，其实加背景我看来就是给普通用户一个假像，它并没有把两个div高度设置一样高．这种还要做背景，也麻烦，虽然网上说很多大网站都是这样做的，我个人觉得不建议这么做，除非有特殊的需求．

如下代码：

?

#wrap{ width:776px; background:url(bg.gif) repeat-y 300px;}

#column1{ float:left; width:300px;}

#column2{ float:right; width:476px;}

.clear{ clear:both;}

总之，我还是建议使用jquery 来div 高度，希望对你有用．

请各位站长看看下面>>>