CSS：使兄弟div具有相对于页面相同的高度

Question

我想约束一个div来获得与具有可变内容的兄弟div相同的高度。另外，我希望两个div的最小高度都是窗口大小的100％。

这是JSFiddle：http://jsfiddle.net/m5q38/1/

问题在于，我想在div上使用min-height，但这需要父容器具有指定的高度，我无法修复。如果我在我的div上使用height: 100%，它们将占用窗口的高度，包括当#container div的内容对于此div而言太大而且会溢出时。

或者，如果我不使用min-height且#container div的内容较少，则div不会占据整个窗口的高度：

（这是其他尝试的小提琴：http://jsfiddle.net/m5q38/3/）

有谁知道如何解决这个问题？

为了让我想要简单：

• 绿色分区符合其内容
• 绿色分区的最小高度为窗口的100％
• 蓝色Div与绿色div的高度相同。

感谢您的帮助！

Answer 1

如果您可以使用jquery，请参阅此FIDDLE并注意已注释掉的CSS

使用jquery：

$( function() {
    $('#left-bg').height($('#container').height())
});

设置一致的div高度始终是一个有趣的问题。在过去，当我有多个兄弟div元素时，我通常只是将它们包装在div中并将每个div css设置为display:table-cell，这样可以很好地保持高度相等而不管div内容如何。

由于您已定位元素

，因此不确定您是否可以使用它

Answer 2

这只能用 完成Javascript，它是一个非常常见的问题，并且有很多（javascript）解决方案，这取决于你是否有一个广义的网站 - 广泛的困境或只是需要调整的一对元素。

如果您使用的是jquery，这将为您提供一个基本的解决方案，您可以使您的需求变得复杂：

/* note: add both ready and resize here, via "on", that way they'll
be bound to any selectors (not just id) in place of "#element1" 
(such as ".left-column"), including those that arrive via an ajax call 
(ie. aren't present when the call is made) */
$(window).on(["ready","resize"], function() {
    var heights = [$("#element1").innerHeight(),$("#element2").innerHeight()]
    var tall_then_short = [heights[0] > heights[1] ? heights : [heights[1], heights[0]];
    $("#" + tall_then_short[0]).css("min-height", "#" + tall_then_short[1]);
});

但更好的方法是使用具有此功能的库，因为它往往更强大;我个人使用了Foundation 5的Equalizer功能。