最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

javascript方法控制多个div高度一致(以最大高度)

Javascript rockyxia 9827浏览 0评论

使用javascript方法控制多个div的高度一致,达到最高的那个div的高度,这个我相信大家应该都遇到过,因为并排的div内容是自由的,所有高度也是不能固定死的,所以往往并排的div高度不一致有时候会很难看,这里我介绍的是javascript的方法,大家也可以使用jquery去做也是可以的,这里使用纯的javascript也不是很复杂,所以我就没有用jquery去做了!首先给大家看代码吧:

html代码:

<div id="bk1">我很喜欢你</div>
<div id="bk2">我很喜欢你
我很喜欢你</div>
<div id="bk3">我很喜欢你
我很喜欢你
我很喜欢你</div>
<div id="bk4">我很喜欢你
我很喜欢你
我很喜欢你
>我很喜欢你</div>
<div id="bk5">我很喜欢你
我很喜欢你
我很喜欢你
我很喜欢你
我很喜欢你</div>

javascript代码:

<script type="text/javascript">
    var a=Math.max(document.getElementById("bk1").offsetHeight,document.getElementById("bk2").offsetHeight,document.getElementById("bk3").offsetHeight,document.getElementById("bk4").offsetHeight,document.getElementById("bk5").offsetHeight);   
    document.getElementById("bk1").style.height = a + "px";   
    document.getElementById("bk2").style.height = a + "px";   
    document.getElementById("bk3").style.height = a + "px";   
    document.getElementById("bk4").style.height = a + "px";   
    document.getElementById("bk5").style.height = a + "px";   
</script>

这里我来解释一下:

1、关于html代码,大家可以使用左浮动和固定的宽度去让他们并排,然后给每个div加边框,不然你怎么能看到效果呢,呵呵

2、关于javascript代码,大家一定要把这个js代码放在所有div的后面,否则可能会有你想不到的结果,呵呵!

你知道了么?快去试试吧……

2012-02-07补充:

经过多次测试,此类代码在ie6浏览器下有延迟问题,所以在此并不推荐大家使用此类方法,我会推荐更好的方法给大家的!

转载请注明:Rockyxia Web技术博客 » javascript方法控制多个div高度一致(以最大高度)
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)