title: Bootstrap jumbotron full height without navbar's height
body: <p>HTML:</p>
  
  <pre><code>&lt;!-- Static navbar --&gt;
  &lt;nav class="navbar navbar-default navbar-static-top"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
                  &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
                  &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
              &lt;a class="navbar-brand" href="#"&gt;Project&lt;/a&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="navbar-collapse collapse"&gt;
              &lt;ul class="nav navbar-nav navbar-right"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  
  
  &lt;div class="jumbotron jumbotron-fluid vertical-center"&gt;
      &lt;div class="container"&gt;
          &lt;h1 class="display-3"&gt;TITLE&lt;/h1&gt;
          &lt;p class="lead"&gt;This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.&lt;/p&gt;
          &lt;hr class="my-4"&gt;
          &lt;p&gt;Description text&lt;/p&gt;
          &lt;p class="lead"&gt;
              &lt;a class="btn btn-primary btn-lg btn-jumbotron" href="#" role="button"&gt;Learn more&lt;/a&gt;
          &lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="container"&gt;
  
  &lt;/div&gt; &lt;!-- /container --&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.navbar{
      padding: 7px 0;
      margin-bottom: 0;
  }
  
  .jumbotron {
      background-image: url(http://cdn.wallpapersafari.com/97/93/UE7u4i.jpg);
      background-size: cover;
      color: white;
      margin: 0;
  }
  
  .vertical-center {
      min-height: 100%;  /* Fallback for browsers do NOT support vh unit */
      min-height: 100vh; /* These two lines are counted as one :-)       */
  
      display: flex;
      align-items: center;
  }
  
  .btn-jumbotron{
      background-color: black;
      border-color: white;
  }
  </code></pre>
  
  <p>I'm trying to have a jumbotron have full height of the browser's window, but without the height of the static navbar. I did get it to size of full viewport by using <code>height: min-height:100vh</code> amnd center it, but as you can see from the jsfiddle example I have a scrollbar present because of the navbar's height - <code>64px</code>. </p>
  
  <p>How can I remove that? </p>
  
  <p><a href="https://jsfiddle.net/iDaniel19/12qxmkjt/" rel="nofollow noreferrer">https://jsfiddle.net/iDaniel19/12qxmkjt/</a></p>