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

Question

我通过 div 创建了一个包含 2 列的布局，但是列的高度不同。我希望一个 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。并且只是将 2 个 div 设置为相同的高度。