asked on

Set up CSS so HTML is always 100% of browser view and footer is always on the bottom

I want my site to display at 100% of the vertical space of the user's browser, with the footer always at the bottom of the page. This is especially important on pages that don't have a lot of content. I found a clever fix that has worked for me in the past here:

http://www.dave-woods.co.uk/index.php/css-fixed-footer/

Dave assigns the HTML height to 100% and places the footer at the bottom of that with some margin adjusting.

This works fine on this page:

http://justthedriver.com/employment/employment.htm

BUT doesn't work on this page:

http://justthedriver.com/contact/contact.htm

I'm guessing it has something to do with the Column L & Column R spacing on the Contact.htm page? Not sure though.

Please advise.

Thanks Experts!

ASKER CERTIFIED SOLUTION

David S.

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

TonyT7220

ASKER

Thanks for this..let me try it out ans let you know.

TonyT7220

ASKER

Here is the page with your style specs:

http://justthedriver.com/employment/employment.htm

Not quite there.

Please advise.

David S.

It seems you didn't copy the "html," from the first rule. The selectors should be "html, body", not just "body"

Also you need to remove the inline styles from the "#container" element.

TonyT7220

ASKER

Thanks Kravimir,

I corrected those errors on the following page:

http://JustTheDriver.com/employment/employment.htm

The one last thing the "container" div's background color of white is not going all the way down to the footer and a wedge of the grey background color shows thru. How do I correct this?

Thanks!

TonyT7220

ASKER

Tested this and it worked. Thanks Kravimir!

David S.

You're welcome. I'm glad I could help.