title: How to Set Column Heights - Bootstrap 4?
body: <p>I am playing around with bootstrap 4 and I am not sure how to get my heights correctly. I have a "side nav", "header", "main" and "footer".</p>
  
  <p>I want "main" to take up most of the height. However for some reason my heights must be messed up as the side nave does not go all the way down and I got this white chunk in the bottom left hand corner. </p>
  
  <p>If you do full screen on my code you will see it.</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>body,
  html,
  .container-fluid {
    height: 100%;
  }
  
  .wrapper {
    display: flex;
    align-items: stretch;
  }
  
  #sidebar {
    background-color: blue;
    color: white;
  }
  
  @media (max-width: 768px) {
    #sidebar {
      min-width: 80px;
      max-width: 80px;
      text-align: center;
      margin-left: -80px !important;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
  
    &lt;title&gt;test&lt;/title&gt;
  
    &lt;!-- Bootstrap CSS CDN --&gt;
    &lt;!-- &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"&gt; --&gt;
    &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"&gt;
    &lt;!-- Our Custom CSS --&gt;
    &lt;link rel="stylesheet" href="style4.css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="wrapper h-100"&gt;
      &lt;!-- Sidebar Holder --&gt;
      &lt;nav id="sidebar"&gt;
        &lt;div class="sidebar-header"&gt;
          &lt;h3&gt;Bootstrap Sidebar&lt;/h3&gt;
        &lt;/div&gt;
  
        &lt;ul class="list-unstyled components"&gt;
          &lt;li&gt;
            &lt;a&gt;
                          Home
                      &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/nav&gt;
  
      &lt;div class="container-fluid "&gt;
        &lt;div class="row h-100"&gt;
          &lt;div class="col-12" style="background-color: red;"&gt;
            One of three columns
          &lt;/div&gt;
          &lt;main class="col-12 h-100" style="background-color: yellow;"&gt;
            test
          &lt;/main&gt;
          &lt;div class="col-12" style="background-color: pink;"&gt;
            test2
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>