Footers on web pages are a great place to chuck copyright information, contact links, and quick navigational stuff. Visitors are trained to look to the bottom of pages to find these types of things, so why not help them out? One problem is that on pages that are a bit vertically challenged, the footer might end up in the middle of the page instead of down at the bottom of the browser window where it should be.
We have a much more recent article detailing modern options for sticky footers, check it out!
Shouldn’t there be some kind of way to get a footer DIV to just sit at the bottom of the browser window no matter the size of the window? Yes, there should be, there is no obvious solution and has been an issue plaguing CSS kind for too long.
A solution has been found! Ryan Fait has coded a beautifully simple way to do this (with valid code!) and has generously shared the technique here. Sorry, that’s offline now. It works in all major browsers (IE, FireFox, Safari, and Opera) and is completely free to use at your will. Thanks Ryan!
Hi!
I cant get this to work if the content is more than the pages or browsers height. Then i just put the footer at the bottom as ‘usual’.
Any tip how to fix it?
This does work if you’re NOT using absolute positioning on your page.
Any idea how to get a sticky footer to work when using absolute positioning?
Ryan’s solution is pretty cool.
But it breaks in ways that can’t be fixed if you are using set height on elements.
So, it’s pretty useless if you are setting the heights of content-containing divs.
I’ve used it a few times, but I’m wary of it.
This is not working for me, the footer always covers the content when the browser window is small.
This is great, but just one question… Can I get the footer to sit on top of the content?
That way, no matter how long the content is, the footer will always be visible.
That would be a bit easier, just set it to postition: fixed; and bottom: 0;
Oh yeah.. I knew that ;)
Thanks Chris!
Try this one http://www.cssstickyfooter.com
It won’t break when you resize window and works with floating 2 column layouts.
was trying to know what is the difference between sticky footer and normal footer…. It is just as simple…