Force Full Height of Window Content & Footer Always At the Bottom

Have you ever had a situation where your content wasn’t long enough to fill the full height of the page so your footer sits above the bottom of the page, making things just look weird and wrong? This is actually quite easy to fix in your style sheet.

The idea here is that we are setting the body of the site to a full 100% of height of the screen. But we don’t want the footer to be “sticky” (meaning, always at the bottom of the screen). We want it to always sit at the bottom of the content, regardless of how long the page is. But if it’s a short page, the footer will sit at the bottom of the screen.

Following is the code you’ll want in your CSS

body, html {
    height:100%;
    margin: 0px;
    padding: 0px;
}

#wrapper {
    position:relative; /* needed for footer positioning*/
    margin:0 auto;
    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/
    min-height:100%; /* real browsers */
}

footer {
    position:absolute;
    width:100%;
    bottom:0; /* stick to bottom */
}

That’s really all there is to it. If your page is structured properly, then your page will always *at least* fill the full height of the screen it’s being displayed on.

Was this helpful to you? Are you having trouble getting it to work? Please leave me a comment.