The CSS Sticky Footer

terryjsmith · on April 10, 2010

Same technique, tested in IE6 to IE8, FF, Chrome, Safari and Opera; no conditionals:

    html, body, #canvas { height: 100%; }

    body > #canvas {
        height: auto; 
        min-height: 100%;
    }

    #canvas {
        width: 100%;
        position: absolute;
    }

    #footer {
        position: absolute;
        bottom: 0;
    }

HTML:

    <body>
        <div id="canvas">
            <!-- all of your other code -->
            <div id="footer"></div>
        </div>
    </body>

on April 10, 2010

[deleted]

terryjsmith · on April 10, 2010

Updated, thank you.

voidpointer · on April 10, 2010

This is a good example of what is still utterly wrong today with HTML/CSS implementations. I appreciate the work and the fact that it is shared with the public. The fact that you still have to deal with this sort of markup in 2010 is really sad.

mtarnovan · on April 10, 2010

Or just use Compass with Blueprint http://wiki.github.com/chriseppstein/compass/ and it's one line of code from there:

+sticky-footer(200px)

jackowayed · on April 10, 2010

That's cool. I think the most surprising part, upon reading the CSS, is that the only special fixes are for Opera and IE8. So IE7 and IE6 just work.

ErrantX · on April 10, 2010

Indeed; but there is the general caveat that you can only use padding to space elements and not margin, which is a bit clunky.

eam · on April 10, 2010

And it validates!

braksandwich · on April 10, 2010

I love this technique, though its been around for a while.

This is where I first saw it: http://www.themaninblue.com/writing/perspective/2005/08/29/

wrinklz · on April 10, 2010

It's cool, but why not just stick a minimum height in your content div?

Pheter · on April 10, 2010

That wouldn't work very well because it may add scrolling to your page when it isn't necessary.

csmeder · on April 10, 2010

Thank you!

briansmith · on April 10, 2010

It isn't working on IE8.

RevRal · on April 10, 2010

It worked in IE8 for me.

What exactly goes wrong in IE8 for you?

MichaelGG · on April 10, 2010

Seems to need a horizonal resize to take effect. Just resizing vertically doesn't do anything.

RevRal · on April 10, 2010

That's unfortunate.

I tested this in IE8 by zooming out. Didn't expect a problem since that worked.

ck2 · on April 10, 2010

Do y'all really care for this on websites you use?

It drives me crazy when I am scrolling a large page if there is nothing useful down there, and I immediately adblock it.