较大的div中的2个div必须等于相同的高度......但是如何？

Question

所以这是一张图片:

问题是我在容器div中有2个div.容器div在高度上扩展为nessiscary,2个内部div也是如此.右边的div有一个边框左边......但如果它是空的,它将不会填满整个高度....我该怎么做？

Answer 1

您所谈论的问题被称为"人造柱",并且在过去几年中已被报道并描述得很好:) http://www.alistapart.com/articles/fauxcolumns/

有几种解决方案:

• 在包含div的背景上使用它来模仿边界
• 使用CSS3技术(显示:表格和显示:表格单元格,但这些并不是真的意味着这个或CSS3 flexbox是高度实验性的,可能在大多数浏览器中都不起作用)
• 使用JS将列高设置为元素的最大高度

最后一个解决方案非常好,所以如果你使用的是jQuery,那么就可以实现:

var max=0;
$('#container').children().each(function(){
    if($(this).height()>max) max = $(this).height();
});
$('#container').children().each(function(){
    $(this).height(max);
});

该脚本遍历容器的所有子节点并找到最高元素.然后它再次迭代并为每个设置最大高度.