title: How to calculate height between navbar and footer?
body: <p>So I would like my application to look like this:</p>
  
  <pre><code>Nav
  Content
  Footer
  </code></pre>
  
  <p>but I'd like the content to be the only thing which will scroll so the navbar and footer stay on the screen at all times.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;div id="header"&gt;
              &lt;nav class="navbar navbar-sticky-top"&gt;
                  &lt;button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar2" aria-controls="exCollapsingNavbar2" aria-expanded="false" aria-label="Toggle navigation"&gt;
                      &amp;#9776;
                  &lt;/button&gt;
                  &lt;div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar2"&gt;
                      &lt;a class="navbar-brand col-xs-2" href="http://www.test.co.uk/"&gt;
                          &lt;img src="~/Content/Images/ap_full@2x.png" /&gt;
                      &lt;/a&gt;
                      &lt;ul class="nav navbar-nav"&gt;
                          &lt;li class="nav-item col-xs-3"&gt;
                              @Html.ActionLink("MANAGEMENT", "", null, new { @class = "nav-link" })
                          &lt;/li&gt;
                          &lt;li class="nav-item col-xs-3"&gt;
                              @Html.ActionLink("DASHBOARD", "", null, new { @class = "nav-link" })
                          &lt;/li&gt;
                          &lt;li class="nav-item col-xs-3"&gt;
                              @Html.ActionLink("HELP/INFO", "", null, new { @class = "nav-link" })
                          &lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
          &lt;div id="content"&gt;
              @RenderBody()
          &lt;/div&gt;
          &lt;div id="footer"&gt;
              &lt;footer class="footer"&gt;
                  &lt;div class="col-xs-4"&gt;
                      @Html.ActionLink("ELFS", "", null, new { @class = "nav-link" })
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      @Html.ActionLink("DATE/TIME", "", null, new { @class = "nav-link" })
                  &lt;/div&gt;
                  &lt;div class="col-xs-4"&gt;
                      @Html.ActionLink("AMOUNT CAPTURED: £0", "", null, new { @class = "nav-link" })
                  &lt;/div&gt;
  
              &lt;/footer&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
  &lt;/body&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>html,
  body {
    margin: 0;
    padding: 0;
    height: 100%; }
  
  #wrapper {
    min-height: 100%;
    position: relative; }
  
  #content {
    padding-bottom: 55px;
    /* Height of the footer element */
    height: 840px;
    overflow: auto; }
  
  #footer {
    width: 100%;
    height: 55px;
    position: absolute;
    bottom: 0;
    left: 0; }
  
  footer {
    background-color: #4F7F64;
    height: 55px; }
    footer div {
      height: inherit;
      text-align: center; }
      footer div a {
        vertical-align: middle;
        color: white;
        font-weight: bold;
        text-decoration: none;
        position: relative;
        top: 50%;
        transform: translateY(-50%); }
        footer div a:hover {
          text-decoration: none;
          color: white; }
  </code></pre>
  
  <p>I have done it where I manually set the height of the content but this won't work on all devices. So is there a way to calculate the height between the navbar and the footer?</p>