当前位置: 主页 > 前端开发 > JavaScript >

关于两个div高度保持一致的(css+js)两种解决办法

泡在网上的日子 发表于 2013-01-01 12:20 次阅读

最近修改以前写的一些代码,发现点问题。

比如2个div需要动态的保持一致的高度。

css的做法是:

<div style="overflow:hidden">
       
<div id="left" style="margin-bottom:-10000px; padding-bottom:10000px;"></div>
       
<div id="right" style="margin-bottom:-10000px; padding-bottom:10000px;"></div>
       
</div>


如果实际的高度不大于10000px,那么这个是没有问题的,如果有一边的实际高度大于了10000px,则另外一边的高度只能被定义为10000px,不符合实际运用的需求。

 

经过测试,用js可以解决这个问题。

代码如下:

var height = document.getElementById("left").offsetHeight > document.getElementById("right").offsetHeight ? 
    document.getElementById("left").offsetHeight : document.getElementById("right").offsetHeight;
       
       
document.getElementById("left").style.height = document.getElementById("right").style.height = height + "px";


另外,在实际运用,可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如,最终赋值时发现left比right还高10px,这种情况只有手动在代码里面减10来解决了。这也是不太完美的地方。


上一篇:Javascript教程:querySelector()方法
querySelector和querySelectorAll是W3C提供的新的查询接口 module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document im
下一篇:Javascript异步编程的4种方法
你可能知道,Javascript语言的执行环境是单线程(single thread)。 所谓单线程,就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任务,以此类推。 这种模式的好处是实现起来比较简单,执行环境相对单纯;坏处是