title: Footer with variable height at bottom of page
body: <p>I'm using this approach to keeping the footer at the bottom: <a href="https://codepen.io/cbracco/pen/zekgx" rel="nofollow">https://codepen.io/cbracco/pen/zekgx</a></p>
  
  <pre><code>body {
    position: relative;
    padding-bottom: 6rem;
    min-height: 100%;
  }
  
  
  .footer {
    position: absolute;
    bottom: 0;
  }
  </code></pre>
  
  <p>The issue is that we have a few different footer versions depending on the page, and they have different heights. </p>
  
  <p>As a result, on some pages there is too much dead space between the bottom of the main content and the footer.</p>
  
  <p>We could potentially change the bottom padding of the body depending on the page but given the structure of our site this wouldn't be easy to implement and it doesn't seem like a very elegant fix. </p>