关注前端开发
关注用户体验

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

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

有左右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根据内容自动保持同等高度
分享到:更多 ()

评论 37

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
  1. #24

    虽然很简单,但是代码不错,感谢分享!

    青枫孤客2年前 (2015-08-19)回复
  2. #23

    (1)外面弄一个div,相对定位
    (2)左边div绝对定位,高度100%
    (3)右边div margin-left:左边div宽度
    这种方法要保证右侧的div高度大于等于左侧的高度(可以给右侧div设置一个最小高度),即高度根据右侧的div变化

    风中云3年前 (2014-07-06)回复
  3. #22

    外围div加上overflow:hidden;里面两个div分别加上margin-bottom:-9999px;padding-bottom:9999px;就可以实现两栏等高了!

    swimly3年前 (2014-03-05)回复
  4. #21

    看标题以为是css解决的,谁知道是用js,其实这个问题我在实际项目中遇到过,完全可以用css来解决。

    candoudou4年前 (2013-10-12)回复
  5. #20

    -margin enough

    动机不纯4年前 (2013-06-05)回复
  6. #19

    呀。。。我的怎么木有作用咧

    2鬼4年前 (2012-12-28)回复
  7. #18

    这段代码感觉很实用,思路不错。

    小奕4年前 (2012-10-30)回复
  8. #17

    额,看到标题还以为是css解决的,结果是js搞的

    aysee5年前 (2012-09-17)回复
    • 就是 没什么技术含量。。。

      yaojaa4年前 (2012-12-18)回复
  9. #16

    不是直接获取两个DIV的height,在 if(divheight01>divheighto2){div02.css(“height”,div01height)}else{div01.css(“height”,divo2height)}

    杀手5年前 (2012-03-27)回复
  10. #15

    😮

    12345年前 (2012-01-10)回复
  11. #14

    DOJO中国 的路过有喜欢的DOJO的在百度搜索 DOJO中国即可

    satsun6年前 (2011-07-27)回复
    • 行,我这就去dojo下

      浩子6年前 (2011-07-28)回复
  12. #13

    话说. 一楼的方法很常用奥.

    ADD~``6年前 (2011-06-15)回复
  13. #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;}

    rochappy6年前 (2011-05-30)回复
    • :mrgreen:

      wykylin5年前 (2011-11-08)回复
      • block.module-a 有 border 就不行了。其实也行,看怎么实现了

        a5年前 (2012-01-12)回复
  14. #11

    :mrgreen: 一旦div里面出现border或padding等,都要手工去调整“”$(“left”).style.height=$(“right”).offsetHeight-X+ “px”; 有些可惜

    enzolinc6年前 (2011-05-23)回复
  15. #10

    我十分想知道如果是竖直想让其对其呢~我经常被逼着用table。比如说我设计一个登录框,登录框中姓名密码这些标题的对齐和后面的输入框如何对齐?

    qixun6年前 (2011-05-08)回复
  16. #9

    我来看博主文章了,感谢分享哦!!

    好看的电影6年前 (2011-05-07)回复
  17. #8

    问一下这么写在火狐下左边的层总比右边的层大2像素 这是为什么
    我这里得这么些才能正常
    $(“left”).style.height=$(“right”).offsetHeight+2 + “px”;

    hzz6年前 (2011-05-06)回复
    • 没人回复 我自己蹦蹦吧

      hzz6年前 (2011-05-06)回复
  18. #7

    可以

    jacky6年前 (2011-05-05)回复
  19. #6

    好文章哦,留个脚印。

    Jayuh6年前 (2011-05-03)回复
  20. #5

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

    那年夏天6年前 (2011-05-03)回复
    • 也可以不这么写的,用更简单的jquery即可代替

      aisinvon6年前 (2011-05-03)回复
      • ❓ 没看明白

        maple6年前 (2011-06-07)回复
      • ❓ 评论发不上去吗

        maple6年前 (2011-06-07)回复
      • 请问那应该如何写呢??我现在的就是因为重载了一次而导致页面上的弹出窗口失效了。

        段段5年前 (2012-09-07)回复
  21. #4

    用jQuery,作弊呀

    独自流浪6年前 (2011-05-03)回复
  22. #3

    看了题目想到用Jquery,果然是。

    罗伊6年前 (2011-05-03)回复
  23. #2

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

    gudu6年前 (2011-05-03)回复
  24. #1

    感谢投稿,假期外出游,没来得及审核

    浩子6年前 (2011-05-02)回复
    • 我还以为没有投递成功

      aisinvon6年前 (2011-05-03)回复
      • haha , 是确认晚了

        浩子6年前 (2011-05-04)回复
        • :smile: 没关系,投递成功就好

          aisinvon6年前 (2011-05-04)

themebetter 国内更好的WordPress主题服务商

立即前往