title: Bootstrap - Fill remaning height of a column
body: <p>Using Bootstrap. I want the top div to be of fixed height according to the content and the bottom div to fill out the remaining height of the parent. The total height should be 100%.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-lg-2"&gt;
        &lt;div id="test"&gt;
          &lt;div&gt;
            Fixed height according to content.
          &lt;/div&gt;
          &lt;div class="fill"&gt;
            Rest of the height
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html, body{
    height: 100%;
  }
  
  .container-fluid, .row, .col-lg-6, #test{
    height: 100%;
  }
  
  .fill {
    background-color: #FF0000;
    height: 100%
  }
  </code></pre>
  
  <p>However it seems like the bottom div is exactly 100% and overflows. The idea is also that there will be several columns.</p>
  
  <p>Thanks in advance!</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/eb8v57pe/4/" rel="nofollow">https://jsfiddle.net/eb8v57pe/4/</a></p>