Sticky CSS Footer

Sticky CSS Footer

Meatbop · 7/6/2009 5:04 pm

When I talked with my fellow designers about this topic, I wasn't sure if it was something worth writing about. I mean, after all these years of working with CSS, isn't this a topic that's been asked and answered a hundred times over?

The answer is, yes. But for me, and hopefully I'll be forgiven the conceit, it hasn't been answered very well. Most solutions require some particularly strange CSS, or an empty div tag that forces a specific amount of padding, etc, etc. But I have yet to find on the web a simple way of implementing of a purely CSS footer that always remains at the bottom of the page that works cross-browser and doesn't give me any glitches.

This led me to the unfortunate, but necessary, step of creating one myself.

Step 1 – The HTML

There are only three things to remember when setting up the structure of your HTML.

1) Make sure there is a wrapper for all of the content.
2) Create the footer outside of the wrapper.
3) Create a div within the wrapper to hold content.

Here is some example HTML-

<html>
<head>
    <title>Sticky Footer</title>
</head>
<body>
    <div id="myWrapper">
            <div id="myContent">
                Now this is a sticky footer page.
                </div>
        </div>

    <div id="myFooter">
            © Sticky Footer 2009
        </div>
</body>
</html>

Step 2 – The CSS

There are very few necessary declarations to make a footer sticky, but they all work together to make it happen. Here's the things to keep in mind.

1) The html and body both need to be set to 100% height
2) The wrapper needs to have a negative bottom margin equal to the height of the footer (i.e. -30 for a footer that's 30px tall)
3) The wrapper must also be set to have a height of 100%
4) The content within must have a minimum height set, otherwise the footer will eventually overlap content if the browser window is squished.

Here is the example CSS. I've highlighted the most important pieces.

        body, html {
            padding:0px;
            margin:0px;
            height:100%;
            font-family:Arial, Helvetica, sans-serif;
        }


        #myWrapper {
            height:100%;
            background-color: #f1f1f1;
            margin-bottom:-40px;
        }
        body > #myWrapper {
            height:auto;
            min-height:100%;
        }

        #myContent {
            padding:10px;
            height:100px;
        }
        #myWrapper > #myContent {
            height:auto;
            min-height:100px;
        }


        #myFooter {
            background-color: #e1e1e1;
            padding:10px 20px;
            height:20px;
            line-height:20px;
            font-weight:bold;
        }

Lets briefly cover what's going on here. First, we have to give the body and html tags a specific height, and this height is 100%. If we didn't do this, the footer wouldn't really understand that it's supposed to be at the bottom of the document.

        body, html {
        ...
            height:100%;
        ...
        }

The main wrapper for the entire layout of the page. We've also given this a height of 100% for IE 6 to understand, and even more importantly, a negative bottom margin. This is basically punching a hole in the bottom of the wrapper to make room for the footer, without any content spilling into the footer. The next selector will only be read by browsers other than IE 6, and it gives the window a min-height of 100%, rather than a set height of 100%.

        #myWrapper {
            ...
            height:100%;
            margin-bottom:-40px;
            ...
        }
        body > #myWrapper {
            height:auto;
            min-height:100%;
        }


This piece seems innocuous, but it's actually very important. Any content that you put within the wrapper needs to have a minimum height. If this isn't specified, then there's a risk that the footer is going to spill into the meat of the page if the browser window is made obscenely small. Granted, most normal people wouldn't ever squish their browser down to only 100 pixels tall but then I've never been accused of being normal. Again, we have height and min-height properties to handle IE 6.

        #myContent {
            padding:10px;
            height:100px;
        }
        #myWrapper > #myContent {
            height:auto;
            min-height:100px;
        }

And finally, the last piece, the footer. Ironically this is the easiest piece, just make sure that whatever the total height is here is equal to the hole you punched through the main wrapper.

        #myFooter {
            …
            padding:10px 20px;
            height:20px;
            ...
        }

There you have it, a footer that stays where it's supposed to. It's clean, it validates and it's cross browser friendly. If anyone can add to this topic or suggest enhancements or even corrections, please reply below.

Next week, Color Profiles.

Previous Next

Stick

Lock