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.

thePixelPixie.com - WordPress boutique

Subscribe and receive my FREE eBook


4 MISTAKES You’re Making on Your Website that are Costing You MONEY!

  • This field is for validation purposes and should be left unchanged.

The Author

Save

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Ready to chat about how ThePixelPixie can help?