11 ms·
The CSS Sticky Footer
- jackowayed 17y agoThat'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.
- csmeder 17y agoThank you!
- briansmith 17y agoIt isn't working on IE8.
- RevRal 17y agoIt worked in IE8 for me. What exactly goes wrong in IE8 for you?
- ck2 17y agoDo 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.
- deleted 17y ago[deleted]
- braksandwich 17y agoI 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/ http://www.themaninblue.com/writing/perspective/2005/08/29/
- voidpointer 17y agoThis 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.
- wrinklz 17y agoIt's cool, but why not just stick a minimum height in your content div?
- Pheter 17y agoThat wouldn't work very well because it may add scrolling to your page when it isn't necessary.
- mtarnovan 17y agoOr just use Compass with Blueprint http://wiki.github.com/chriseppstein/compass/ http://wiki.github.com/chriseppstein/compass/ and it's one line of code from there: +sticky-footer(200px)
- terryjsmith 17y agoSame 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>
- deleted 17y ago[deleted]
- terryjsmith 17y agoUpdated, thank you.