Footer at absolute bottom

Is there a way to get your footer to stick to the bottom of your page, even when the content is too short?

We have two pages… The first page has lots of content and fills the browser nicely. When you scroll all the way down, the footer is there - nice and happy, snug against the bottom of the browser.

The second page has a lot less content - so the footer is just underneath where the content ends…not at the bottom of the browser.

Is this doable with CSS? Or should I be in the JavaScript section asking this question?

Thanks :slight_smile:

Yes this is doable with CSS
View source for understanding. If you need an explanation just shout :).

It basically involves setting the html,body to 100% height, then a min-height:100% wrapper (height:100% for IE6), a negative top margin on the wrappper and top padding (or a top border) matching the footer height, and boom :slight_smile:

Thanks a lot :slight_smile: I’ll give it a try!

Here’s another one: CSS Sticky Footer.

That sticky footer is not very good, it claims to be working in all browses but it doesn’t. I have sent a few emails trying to get him to either update it or take it offline but he hasn’t answered.

The one I posted is 100% perfect and it is highly doubtful that anything (literally ANYTHING) can be done to improve it.

Ryan Faits is broken in IE7/8/Opera. In IE8/Opera if you grab the bottom of the browser screen (while not maximized) and bring it up/down you will see the footer doesn’t update whilst going up. A horizontal move on the page (grabbing the left/right or the corner side) will fix it, but the above link I gave has a fix for that :).

As Ryan mention above the Ryan Fait footer is badly broken and I would advise against using it. I also emailed him a few times to get it updated (as we have to fix these broken version in the forum every week) but I never got a reply either :frowning: