使2个div与父级具有相同的高度

Question

我用div创建了一个包含2列的布局，但是列的高度是不同的。我希望div可以扩展为另一个div。

链接是我的演示http://jsbin.com/UjiyufO/2

请给我任何建议。

Answer 1

确保父元素#main具有正确的高度，或者2个div的'100％高度无效。

您也可以使用：

#main{ overflow:hidden; }
#header,#content{           
  width: 40%;
  display: block;
  border: 1px solid;
  float: left;
  margin-bottom:-1000px;
  padding-bottom:1000px;
}

Answer 2

如果您添加此Javascript，它将起作用

$(document).ready(function(){
    var myheight= $('#header').height(); 
    var thatheight= $('#content').height(); 
    if(myheight>thatheight)
    {
        $('#content').css('height',myheight)
    }
    else
    {
        $('#header').css('height',thatheight)
    }
});

选中此JSbin

Answer 3

设置相同高度的2个div。示例：

#main div{
    height: 500px;
}

在您的演示中，有一个标签<div>，其id = main，有2个div。并且只设置了两个具有相同高度的div。