Keep footer at bottom of page when page height dynamically changes using CSS

Question

There are a lot of topics out there, giving solutions to keep the footer at the bottom of a page. However, I am struggling to get it working.

The problem is that the page can dynamically change its height.

With the current solution I'm using, the footer is at the bottom of the page. But when the page height dynamically changes, the footer remains at its exact position.

The CSS of the footer is as followed:

#footer {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
}

The html and body tags are having the following rules:

html, body {
    min-height: 100%;
    height: 100%;
}

See snippet below for a visual demo (best used in full window mode)

$(document).ready(function() {
  
  var button = $("#addContent");
  var lorem = "<p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p><p>Proin cursus odio quis neque porttitor pretium. Duis cursus dolor mi, quis blandit eros dictum vitae. Mauris tempus turpis non leo commodo sagittis ac ac urna. Vivamus aliquet euismod posuere. Suspendisse at semper mauris. Phasellus blandit convallis tincidunt. Maecenas elementum ullamcorper risus, a vestibulum ex accumsan sed. Nulla facilisi.</p>";
  
  button.click(function() {
    
    $("main button").before(lorem);
    
  });
  
});

* {
  box-sizing: border-box;
}

body {
  margin: 0;
}

header {
  background: #333;
  color: #fff;
  padding: 25px;
}

main {
  padding: 25px;
}

main h3 {
  margin-top: 0;
}

code {
  background: #f1f1f1;
  padding: 0 5px;
}

footer {
  position: absolute;
  background: #ededed;
  padding: 25px;
  color: #000;
  right: 0;
  bottom: 0;
  left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<header>
  <p>Just a sample header</p>
</header>

<main>
  <h3>Some sample content</h3>
  <p>Click on the <code>button</code> to see what i mean.</p>
  <p>When the <code>heigth</code> of the page dynamically changes, the <code>footer</code> will stay at its exact position.</p>
  <button id="addContent">Click to add more content</button>
</main>

<footer>
  <p>The footer</p>
</footer>

How can I let the CSS know the height changed? And to keep that footer at the bottom of the document instead that its staying at the bottom of the window?

Answer 1

First of all if you want to use position: absolute, then the parent should be other that the initial position, like position: relative or it will look the first parent element what is positioned relative. So if you add the position: relative to body, the footer will be dynamic.

But absolutely positioned elements are completely removed from the document flow, so in this case it will overlap on other elements, but we can solve if we add the transform: translateY(100%)

so in the end you will have:

body {
    margin: 0;
    position: relative;
}

footer {
    position: absolute;
    background: #ededed;
    padding: 25px;
    color: #000;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateY(100%);
}