如何使两个嵌套的Bootstrap行一起填充其父列？

Question

我正在尝试创建一个嵌套行的布局。我的问题是，如果我让第一个嵌套行自动确定其高度（从其内容），然后我不能可靠地设置第二个的高度。我希望将第二个设置为height:100%将考虑第一行div，但它不会，并且溢出容器。

在我的例子中，与class="orange"的div是第一个，与class="blue" div是容器溢出的罪魁祸首。

尽管我可以将每个嵌套行设置为父级的百分比，并因此具有该功能，但我希望在bootstrap中有一个更好的解决方案来解决此问题。我不想要的原因是我想要一个标题，并让第一行成为该标题的大小。

这里是我试图样本布局：

.blue { 
 
    background-color: blue; 
 
} 
 
.orange { 
 
    background-color: orange; 
 
} 
 
.green { 
 
    background-color: green; 
 
} 
 
.full-height { 
 
    height: 100%; 
 
} 
 

 
#main { 
 
    height: 200px; 
 
    width: 100%; 
 
    background-color: gray; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div id="main"> 
 
    <div class="container-fluid full-height"> 
 
     <div class="row full-height"> 
 
      <div class="col-xs-3 green full-height"> 
 
       Words! 
 
      </div> 
 
      <div class="col-xs-9 full-height"> 
 
       <div class="row orange"> Words! </div> 
 
       <div class="row blue full-height"> Other words!</div> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div>

JSFiddle

Answer 1

你应该巢橙色排蓝色的行，像这样：

<div id="main"> 
<div class="container-fluid full-height"> 
    <div class="row full-height"> 
     <div class="col-xs-3 green full-height"> 
      Words! 
     </div> 
     <div class="col-xs-9 full-height"> 
      <div class="row blue full-height"> 
       <div class="col-xs-12"> 
        <div class="row orange"> 
          <div class="col-xs-12">Words!</div> 
        </div> 
        Other words! 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 
</div> 

http://jsfiddle.net/759v0hyL/2/