title: Getting Bootstrap 4 Navbar Sidebar to Extend to Full Height of Page
body: <p>I am working with Bootstrap 4 for the first time in a .NET MVC (Not Core) starter application. Bootstrap version updated to 4.1 within Nuget.</p>
  
  <p>I need to have both a horizontal navbar at the top as well as a vertical navbar (sidebar) on the left side.</p>
  
  <p>The example I have been working off of:
  <a href="https://getbootstrap.com/docs/4.1/examples/dashboard/" rel="nofollow noreferrer">https://getbootstrap.com/docs/4.1/examples/dashboard/</a></p>
  
  <p>The problem that I am having is that the sidebar only extends down as far as the main page content goes, I have been unable to get it to extend down to 100% of the page.  I have tried setting the height manually both on the navbar and sidebar related divs, but it has no effect.</p>
  
  <p>_Layout.cshtml :</p>
  
  <pre><code>&lt;body&gt;
     &lt;nav class="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow"&gt;
      &lt;a class="navbar-brand col-sm-3 col-md-2 mr-0" href="#"&gt;Company name&lt;/a&gt;
      &lt;ul class="navbar-nav px-3"&gt;
          &lt;li class="nav-item text-nowrap"&gt;
              &lt;a class="nav-link" href="#"&gt;Sign out&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
      &lt;div class="container-fluid"&gt;
        &lt;div class="row"&gt;
          &lt;nav class="col-md-2 d-none d-md-block bg-light sidebar"&gt;
              &lt;div class="sidebar-sticky"&gt;
                  &lt;ul class="nav flex-column"&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link active" href="#"&gt;
                              &lt;span data-feather="home"&gt;&lt;/span&gt;
                              Dashboard &lt;span class="sr-only"&gt;(current)&lt;/span&gt;
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;
                              &lt;span data-feather="file"&gt;&lt;/span&gt;
                              Orders
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;
                              &lt;span data-feather="shopping-cart"&gt;&lt;/span&gt;
                              Products
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;
                              &lt;span data-feather="users"&gt;&lt;/span&gt;
                              Customers
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;
                              &lt;span data-feather="bar-chart-2"&gt;&lt;/span&gt;
                              Reports
                          &lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li class="nav-item"&gt;
                          &lt;a class="nav-link" href="#"&gt;
                              &lt;span data-feather="layers"&gt;&lt;/span&gt;
                              Integrations
                          &lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
  
                  &lt;h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted"&gt;
                      &lt;span&gt;Saved reports&lt;/span&gt;
                      &lt;a class="d-flex align-items-center text-muted" href="#"&gt;
                          &lt;span data-feather="plus-circle"&gt;&lt;/span&gt;
                      &lt;/a&gt;
                  &lt;/h6&gt;                 
              &lt;/div&gt;
          &lt;/nav&gt;
          &lt;main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4"&gt;      
                  @RenderBody()               
          &lt;/main&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Index.cshtml:</p>
  
  <pre><code>&lt;div class="jumbotron"&gt;
  &lt;h1&gt;ASP.NET&lt;/h1&gt;
  &lt;p class="lead"&gt;ASP.NET is a free web framework for building great Web sites and Web applications using HTML, CSS and JavaScript.&lt;/p&gt;
  &lt;p&gt;&lt;a href="https://asp.net" class="btn btn-primary btn-lg"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div class="row"&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Getting started&lt;/h2&gt;
          &lt;p&gt;
              ASP.NET MVC gives you a powerful, patterns-based way to build dynamic websites that
              enables a clean separation of concerns and gives you full control over markup
              for enjoyable, agile development.
          &lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301865"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Get more libraries&lt;/h2&gt;
          &lt;p&gt;NuGet is a free Visual Studio extension that makes it easy to add, remove, and update libraries and tools in Visual Studio projects.&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301866"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col-md-4"&gt;
          &lt;h2&gt;Web Hosting&lt;/h2&gt;
          &lt;p&gt;You can easily find a web hosting company that offers the right mix of features and price for your applications.&lt;/p&gt;
          &lt;p&gt;&lt;a class="btn btn-default" href="https://go.microsoft.com/fwlink/?LinkId=301867"&gt;Learn more &amp;raquo;&lt;/a&gt;&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How it looks (yellow line represents approx where I would expect the sidebar to extend down to):</p>
  
  <p><a href="https://i.stack.imgur.com/1MgKP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/1MgKP.png" alt="enter image description here"></a></p>