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");//如果有3个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>
</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 高度,希望对你有用.
请各位站长看看下面>>>
posted on 2011-06-18 14:09 cestarme 阅读(5642) 评论(16) 编辑 收藏 举报