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

Question

There are many topics that provide solutions to support the footer at the bottom of the page. However, I'm struggling to get it to work.

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 changes dynamically, the footer remains in its exact position.

Footer CSS:

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

The html and body tags have the following rules:

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

Below is a snippet below for a visual demonstration (best used in full screen)

 $(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 CSS know that the height has changed? And save this footer at the bottom of the document, and not stay at the bottom of the window?

Answer 1

First of all, if you want to use position: absolute , then the parent must be different than the starting position, for example position: relative , or it will look like the first parent element that is positioned relatively. Therefore, if you add position: relative to the body , the footer will be dynamic.

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

so at the end you get:

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