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

Question

所以这是一张图片：

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

Answer 1

您所谈论的问题被称为“虚假列”，并且在过去几年中得到了很好的报道和描述:) http://www.alistapart.com/articles/fauxcolumns/

有几种解决方案：

• 在包含div的背景上使用背景来模仿边框
• 使用CSS3技术（显示：表格和显示：table-cell，但这些并不是真正意义上的这个或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);
});

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

Answer 2

<强> HTML

<div class="wrapper">
    <div class="child_1">First Div content goes here</div>
    <div class="child_2">Second Div content goes here</div>
</div>

<强> CSS

.wrapper {
        width: 960px;
        overflow: hidden;
        margin: 0px auto;
    }

    .child_1, .child_2 {
        padding-bottom: 9999em;
        margin-bottom: -9999em;
        width: 50%;
        float: left;
    }

    .child_1 {
        background: #f00;
    }

    .child_2 {
        background: #0f0;
    }

Answer 3

尝试向左侧div添加border-right。在容器div中添加一个带有clear类的div。然后在css中添加： .clear {明确：两者;}

Answer 4

这就是你要找的......

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

---

此外，我假设您正在使用float，所以我强烈建议您阅读：

http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/

...记得清理你的花车！