title: How to automatically adjust row height in Bootstrap?
body: <p>I'm learning Bootstrap and I'm trying to figure out how to automatically adjust a rows height given this conditions:</p>
  
  <ul>
  <li>There are 3 rows within a <strong>container-fluid</strong></li>
  <li><strong>row1</strong> must adjust to the height of its content</li>
  <li><strong>row3</strong> must adjust to the height of its content and be at the bottom of the viewport</li>
  <li><strong>row2</strong> should adjust its height to the space between <strong>row1</strong> and <strong>row3</strong> to fill the <strong>container-fluid</strong></li>
  </ul>
  
  <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>html, body, .container-fluid {
    height: 100%;
    background: lightyellow;
  }
  
  .col {
    border: solid 1px #6c757d;
  }
  
  .content-1 {
    height: 50px;
    background-color: lightcoral;
  }
  
  .content-2 {
    height: 200px;
      background-color: lightgreen;
  }
  
  .content-3 {
    height: 25px;
    background-color: lightblue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container-fluid"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;div class="content-1"&gt;
        ROW 1 -&gt; Height of its content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;div class="content-2"&gt;
        ROW 2 -&gt; Height between row1 and row3 automatically adjusted
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="row"&gt;
      &lt;div class="col"&gt;
        &lt;div class="content-3"&gt;
        ROW 3 -&gt; Height of its content
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/aq9Laaew/236844/" rel="noreferrer">JSFiddle demo</a></p>
  
  <p>What would be the best approach to do so?. Thank you in advance!</p>