Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Sticky Footer
<div class="page-wrap">
<h1>Sticky Footer</h1>
<h2>with Fixed Footer Height</h2>
<footer class="site-footer">
I'm the Sticky Footer.
/* Mostly: */
* {
margin: 0;
html, body {
height: 100%;
.page-wrap {
min-height: 100%;
/* equal to footer height */
margin-bottom: -142px;
.page-wrap:after {
content: "";
display: block;
.site-footer, .page-wrap:after {
/* .push must be the same height as footer */
height: 142px;
.site-footer {
background: orange;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.