title: Bootstrap 100% height with navbar
body: <p>This is basically what I want to achieve:</p>
  
  <p><img src="https://i.stack.imgur.com/01vae.png" alt="Example"></p>
  
  <p>I want the total page to be 100% height, but when I put the sidebar and body at 100%, the page adds the 40px from the navbar, so I get a scrollbar even when there shouldn't be one.</p>
  
  <p>I got it fixed by using tables, but I'm sure there must be an easier way</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="container-fluid"&gt;
          &lt;div class="navbar"&gt;&lt;/div&gt;
          &lt;div class="sidebar"&gt;&lt;/div&gt;
          &lt;div class="body"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>and css what I've got so far:</p>
  
  <pre><code>body, html, .container-fluid, .sidebar, .body {
      height: 100%;
      min-height: 100%;
  }
  .navbar {
      height: 40px;
      position: relative;
  }
  </code></pre>