Sticky footers

Sticky footers should be ubiquitous. They are not.

This leads me to believe that many developers are unaware of how to prevent footers from floating up on pages without much content.

I'll explain how it's done. The markup must look something like the following:

<body>
    <div id="wrap">
        <div id="main">
        </div>
    </div>
    <div id="footer">
    </div>
</body>

The required CSS is also straightforward. First, set the heights of the html and body elements to the height of the viewport:

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

This makes it possible to set the minimum height of the wrapper div to the height of the viewport:

#wrap   { min-height: 100%; }

Next, pull up the footer so that it's visible without scrolling on pages without a lot of content:

#footer { margin-top: -5em; height: 5em; }

Finally, apply bottom padding to the main content div to ensure that nothing is covered by the footer:

#main   { padding-bottom: 5em; }

Putting it all together gives the following:

html    { height: 100%; }
body    { height: 100%; }
#wrap   { min-height: 100%; }
#main   { padding-bottom: 5em; }
#footer { margin-top: -5em; height: 5em; }

This CSS works in all modern browsers. If you need to support antiquated browsers, you should have a look at the hacks suggested at CSS Sticky Footer.

Check out the sticky footer demo to see all this theory in action.

Comments

Wonderful! This is so easy to follow! Thank you! :-)

Katie

Hey David,

This is a great and simple tutorial to follow, kudos to you! I have one problem though, if I do everything your way but add in a few elements of my own such as a sidebar and content area within the "main" wrap area, the content overlaps into the footer area. If I remove the -5 em margin-top on the footer, the content no longer pours into the footer area but now the footer is below the viewport. Any suggestions lol.

Sorry to clog your comment area with my problem lol.

Shane

The padding applied to the bottom of #main should offset the negative top margin applied to #footer. If you are having trouble I suggest testing with absolute values (100px, for example) rather than proportional values, since 5em applied to #main does not necessarily equal 5em applied to #footer.

Respond