

The CSS Sticky Footer - RevRal
http://www.cssstickyfooter.com/

======
terryjsmith
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>

------
voidpointer
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
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
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
Indeed; but there is the general caveat that you can only use padding to space
elements and not margin, which is a bit clunky.

------
braksandwich
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/>

------
ck2
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.

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

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

------
csmeder
Thank you!

------
briansmith
It isn't working on IE8.

~~~
RevRal
It worked in IE8 for me.

What exactly goes wrong in IE8 for you?

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

~~~
RevRal
That's unfortunate.

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

