首页 > 代码库 > 关于两个div高度保持一致的(css+js)两种解决办法
关于两个div高度保持一致的(css+js)两种解决办法
最近修改以前写的一些代码,发现点问题。
比如2个div需要动态的保持一致的高度。
css的做法是: 精心开发5年的UI前端框架!
.代码
- <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可以解决这个问题。
代码如下: 精心开发5年的UI前端框架!
.代码
- 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来解决了。这也是不太完美的地方。
关于两个div高度保持一致的(css+js)两种解决办法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。