ネストされたブートストラップグリッドで外側の列を同じ高さにする方法

Question

ネストされたグリッドを持つ動的なブートストラップ3レイアウトがあります。これは、垂直スペースを埋める方法がわからないことを除いて、トップレベルの列が同じ高さになるようにします。

ここでは、中程度の画面（画像を埋め込む担当者が不十分です）の問題の画像を示します：Nested bootstrap vertical height problem。私は、 "左のボックス"と "右のボックス"を "ボトムバー"に伸ばしてほしい。

ここに投稿されたソリューションは、How can I make bootstrap columns all the same heightなどさまざまな場所で試しましたが、ネストされたグリッドでは動作しないようです。

大変助かりました。

私はこのようになりますon 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> 

Answer 1

私は、この修正されたバージョンのを使用して作業を取得することができました余分なマージン/パディング/オーバーフロートリックはここに記載されています：How can I make bootstrap columns all the same height

オーバーフローを適用すると、すべての行にが隠されているため、内側の行に余分なパディングがクリップされるため、このソリューションはネストされたグリッドでは機能しません。 コンテナトップレベルのを隠され、今では動作します：

は代わりに、私はオーバーフローを入れて！また、オーバーフローを入れてみました。コンテンツクラスのhiddenクラスがありました.FromやEdgeではなく、Chromeでも効果がありました。 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; 
}