如何使嵌套的Bootstrap网格的外部列具有相同的高度

Question

我有一个动态的嵌套网格布局，使用bootstrap 3框架实现，对于所有屏幕大小都能正常工作，但是我无法弄清楚如何填充垂直空间，使得顶级列具有相同的高度。

这是中等屏幕的问题图像（抱歉，没有足够的声望来嵌入图像）：Nested bootstrap vertical height problem。我想要“LEFT BOX”和“RIGHT BOX”延伸到“Bottom Bar”。

我尝试过这里发布的解决方案：How can I make bootstrap columns all the same height，以及其他各种地方，但是它们似乎都不能与嵌套网格一起使用。

非常感谢任何帮助。

我已经在Fiddler上放置了一个示例，看起来像这样：

CSS:

.container {
    margin-top: 10px;
}

.dark {
    background: #444;
    color: #DDD;
}

.light {
    background: #DDD;
    color: #222;
}

.content {
    padding: 30px;
    margin: 0;
}

.image {
    width: 100%;
    padding: 0;
    margin: 0;
    vertical-align: bottom;
}

HTML：

<div class="container">
<div class="row">
    <div class="col-sm-8">
    <div class="row">
        <div class="col-md-12 dark image">
        <img src="https://s20.postimg.io/kdweqmuzx/postimage.gif" width="100%" />
        </div>
        <div class="col-md-6 dark content">
        <h2>LEFT BOX</h2>
        <br />
        <br />
        <br />
        </div>
        <div class="col-md-6 light content">
        <h2>RIGHT BOX</h2>
        <br />
        <br />
        <br />
        </div>
    </div>
    </div>
    <div class="col-sm-4 dark">
    <div class="row">
        <div class="dark content">
        <h2>RIGHT PANEL</h2>
        </div>
    </div>
    <div class="row">
        <div class="dark image">
        <img src="https://s20.postimg.io/5cu49dca5/postimage.gif" width="100%" class="bottom" />
        </div>
    </div>
    </div>
</div>
<div class="row dark">
    <div class="col-sm-12 dark content">
        <h2>Bottom Bar</h2>
    </div>
</div>
</div>

- Chris C

Answer 1

我使用修改过的额外边距/填充/溢出技巧的版本使其正常工作，该技巧在此处有描述：如何使Bootstrap列的高度相同

按照现有方案，该解决方案将无法处理嵌套网格，因为如果对所有行应用overflow:hidden，则会裁剪内部行上的额外填充。

相反，我将overflow:hidden放在顶层容器上，现在它可以正常工作！FYI，我还尝试将overflow:hidden放在content类上，在Chrome中具有所需的效果，但在Firefox或Edge中没有。

JsFiddle上的示例：http://jsfiddle.net/jccaulfield/ggjwwuup/3/

.container {
overflow: hidden;
}

.dark {
background: #444;
color: #DDD;
}

.light {
background: #DDD;
color: #222;
}

.content {
padding: 30px;
margin: 0;
margin-bottom: -999px;
padding-bottom: 999px;
overflow: hidden;
}

.image {
padding: 0;
margin: 0;
}

- Chris C