如何让2个并列的div根据内容自动保持同等高度25条评论

2011-05-02 分类：JavaScript 5,488人浏览

最近在工作中碰到一个需求：

有左右2个并列的div，2个div都不能限定高度。左div为导航，右div为内容。如何能让左div块自动获得和右div块相等的高度？

同时，也有网友提问到“如果右块高度比左块低，会不会导致左块的内容被溢出不显示之类的问题。应该是取左右2者的最高值吧来对齐吧”。

的确应该是哪个div Height值大，就将其值赋给Height值小的div，从而使2个div高度始终保持一致。看代码：

function $(id){ return document.getElementById(id) } function getHeight() { if ($("left").offsetHeight>=$("right").offsetHeight){
$("right").style.height=$("left").offsetHeight + "px";
}
else{
$("left").style.height=$("right").offsetHeight + "px";
}
}
window.onload = function() {
getHeight();
}

经测试，该代码有效。

效果请看Demo。

另外，在实际运用，可能还会存在由于左div或右div存在padding属性而导致上述取值变多或变少的问题。比如，最终赋值时发现left比right还高10px，那么也可以通过修改上述代码解决：

$("left").style.height=$("right").offsetHeight-10 + "px";

文章来源：http://twetw.com/1780.html 和http://twetw.com/1807.html

感谢端友【Aisin Von】的投稿！！

源: http://itwwt.com

转载请注明：大前端 » 如何让2个并列的div根据内容自动保持同等高度

您还可以继续浏览 JavaScript jQuery 前端技巧的文章

24访客评论，博主回复1条

#15

123401-10 00:36 回复
#14
DOJO中国的路过有喜欢的DOJO的在百度搜索ＤＯＪＯ中国即可

satsun07-27 18:01 回复
- 行，我这就去dojo下
  
  浩子07-28 09:26 回复
#13
话说. 一楼的方法很常用奥.

ADD~``06-15 16:39 回复
#12
css也可以实现等高的需求
.module{overflow:hidden;}
.module-a,.module-b{float:left;width:400px;padding-bottom:200em;margin-bottom:-200em;background:red;}
.module-b{background:green;}

rochappy05-30 21:01 回复
- wykylin11-08 09:21 回复
  - block.module-a 有 border 就不行了。其实也行，看怎么实现了
    
    a01-12 14:28 回复
#11
一旦div里面出现border或padding等，都要手工去调整“”$(“left”).style.height=$(“right”).offsetHeight-X+ “px”; 有些可惜

enzolinc05-23 11:54 回复
#10
我十分想知道如果是竖直想让其对其呢~我经常被逼着用table。比如说我设计一个登录框，登录框中姓名密码这些标题的对齐和后面的输入框如何对齐？

qixun05-08 22:54 回复
#9
我来看博主文章了，感谢分享哦！！

好看的电影05-07 16:22 回复
#8
问一下这么写在火狐下左边的层总比右边的层大2像素这是为什么
我这里得这么些才能正常
$(“left”).style.height=$(“right”).offsetHeight+2 + “px”;

hzz05-06 14:26 回复
- 没人回复我自己蹦蹦吧
  
  hzz05-06 16:39 回复
#7
可以

jacky05-05 13:35 回复
#6
好文章哦，留个脚印。

Jayuh05-03 16:39 回复
#5
浩哥….这个恐怕有点危险哦
function $(id){ return document.getElementById(id) }
把jquery里面的那个构造函数给重载了….如果是类的话….$()这个函数就不起作用了

那年夏天05-03 14:00 回复
- 也可以不这么写的，用更简单的jquery即可代替
  
  aisinvon05-03 20:35 回复
  - 没看明白
    
    maple06-07 13:46 回复
  - 评论发不上去吗
    
    maple06-07 13:48 回复
#4
用jQuery，作弊呀

独自流浪05-03 13:52 回复
#3
看了题目想到用Jquery，果然是。

罗伊05-03 10:53 回复
#2
前段时间也碰到了这样的问题。。。
特别是后台的界面。。。都希望能够左右高度相同。。。
但是也碰到了一个问题。。。
就是页面可能存在点击显示和隐藏的效果。。。
导致左右高度边框无法对齐。。。
最后还是用了table。。。

gudu05-03 10:05 回复
#1
感谢投稿，假期外出游，没来得及审核

浩子05-02 21:50 回复
- 我还以为没有投递成功
  
  aisinvon05-03 20:38 回复
  - haha , 是确认晚了
    
    浩子05-04 09:59 回复
    - 没关系，投递成功就好
      
      aisinvon05-04 10:58 回复