title: How to make two nested Bootstrap rows together fill their parent column?
body: <p>I am attempting to create a layout with nested rows. My problem is that if I let the first of the nested rows determine its height automatically (from its contents), then I can't reliably set the height of the second one. My hope was that setting the second one to <code>height:100%</code> would take into account the first row div, but it does not, and instead overflows the container. </p>
  
  <p>In my example below, the div with <code>class="orange"</code> is the first one, and the div with <code>class="blue"</code> is the culprit that overflows the container. </p>
  
  <p>Although I could set each of the nested rows to be a percentage of the parent, and thus have that work, I am hoping there is a better solution within bootstrap that solves this. The reason I don't want to is I want a header, and to have the first row be the size of that header.</p>
  
  <p>Here is a sample layout of what I am attempting: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.blue {
      background-color: blue;
  }
  .orange {
      background-color: orange;
  }
  .green {
      background-color: green;
  }
  .full-height {
      height: 100%;
  }
  
  #main {
      height: 200px;
      width: 100%;
      background-color: gray;
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/&gt;
  
  &lt;div id="main"&gt;
      &lt;div class="container-fluid full-height"&gt;
          &lt;div class="row full-height"&gt;
              &lt;div class="col-xs-3 green full-height"&gt;
                  Words!
              &lt;/div&gt;
              &lt;div class="col-xs-9 full-height"&gt;
                  &lt;div class="row orange"&gt; Words! &lt;/div&gt;
                  &lt;div class="row blue full-height"&gt; Other words!&lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/zy554usz/1" rel="nofollow noreferrer">JSFiddle</a></p>