title: Bootstrap main 100 height
body: <p>What the best approach to make a column 100% height in bootstrap? I have a typically bootstrap dashboard template. I suceeded somehow with <code>calc(100vh - 72px)</code> where the 72 is the height of navbar but it doesn't seem elegant. What is your preferred approach to achieve this?</p>
  
  <p><a href="https://i.stack.imgur.com/ARewz.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ARewz.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;body style="height:100% !important;"&gt;
  
      &lt;div class="navbar navbar-inverse navbar-fixed-top"&gt;
          &lt;div class="container"&gt;
              &lt;div class="navbar-header"&gt;
                  &lt;button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"&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;
                  @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
              &lt;/div&gt;
              &lt;div class="navbar-collapse collapse"&gt;
                  &lt;ul class="nav navbar-nav"&gt;
                      &lt;li&gt;@Html.ActionLink("Home", "Index", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("About", "About", "Home")&lt;/li&gt;
                      &lt;li&gt;@Html.ActionLink("Contact", "Contact", "Home")&lt;/li&gt;
                  &lt;/ul&gt;
                  @Html.Partial("_LoginPartial")
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;div class="container-fluid" style="height:100%"&gt;
      &lt;div class="row"&gt;
          &lt;div class="col-xs-12  col-sm-3 col-md-3 sidebar"&gt;
              &lt;div&gt;
                  top
              &lt;/div&gt;
              &lt;div style=""&gt;
                 bot           
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/div&gt;
      &lt;div class="row"&gt;
          &lt;div style="padding-left:0px !important;border:1px solid red;" class="col-xs-12 col-xs-offset-0 col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main"&gt;
              &lt;div style="padding-top:0px !important;margin:0px !important;height:100%"&gt;this needs to be 100% height&lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  
  &lt;script src="~/Scripts/jquery-3.2.1.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/bootstrap.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/holder.min.js"&gt;&lt;/script&gt;
  &lt;script src="~/Scripts/ie10-viewport-bug-workaround.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>