tl;dr
See working CodePen: http://cdpn.io/KwzuA
or use Flexbox - see demo: http://codepen.io/astrotim/pen/PwYQOJ/right/?editors=010
Explanation
Using position
for a sticky footer is typically not a good idea, as it removes the element from the document flow and can have undesired results of the footer overlapping the content when scrolling.
A tried and trusted method is to add a "push" div inside the wrapper div and then have the footer div below, outside the wrapper. Like this:
<div id="wrapper">
<header>
<h1>Header</h1>
</header>
<div id="body">
<p>Lorem ipsum...</p>
</div><!--#body-->
<div class="push"></div>
</div><!--#wrapper-->
<footer>
<p>Footer</p>
</footer>
For the CSS, you will need to set html
, body
and #wrapper
with height: 100%
. You then set a fixed height to your footer
and apply the same height to #push
. Then you offset the body with a negative margin-bottom
. The #wrapper
needs a few other properties, like so:
html, body {
height: 100%;
}
body {
overflow-y: scroll;
}
#wrapper {
min-height: 100%;
height: auto !important;
height: 100%;
margin: 0 auto -160px;
}
.push, footer {
height: 160px;
}
footer {
/* remember the box model: padding+height */
padding-top: 15px;
height: 145px;
}
The footer will now flow properly when the content of the page extends below the fold, and will be sticky when the content does not.
** Use Flexbox **
The modern approach to this is using Flexbox. See: http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/
I used the Flexbox technique on a recent project