Keep footer at bottom of page when page height dynamically changes using CSS
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> 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%);
}
上一篇: 消息显示时防止行跳跃？