I have been using a new CSS technique for creating fixed footers – that is, footers which pin themselves to the bottom of the browser window – without using JavaScript. Headscape designer Ed Merritt is the one who came up with the idea, and like most elegant solutions, this one is so simple that I wish I’d thought of it. It really works.
Assuming your basic HTML layout markup looks like below:
1 2 3 4 | <div id="container"> <div id="content"></div> <div id="footer"></div> </div> |
… you can use the following CSS example to pin your footer:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | #container { position:absolute; min-height:100%; } #content { margin-bottom:100px; /* same as footer height */ } #footer { position:absolute; bottom:0; height:100px; /* same as content margin-bottom */ } |
So, hack away. It’s not suitable for every design, of course, but it just might help you get rid of that annoying whitespace below your footer, for instance on a content-starved page which ends up far short of the window height.