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!
TonyT7220Asked:
Who is Participating?
 
David S.Connect With a Mentor Commented:
No. With the "height:100%" content taller than that will overflow the bottom instead of making "#container" expand in height. In some situations you can't tell the difference, but others (like if you have a vertically repeated background image on it) it makes a significant difference.
0
 
dwkdCommented:
employment page doesn't work neither in FF or IE

footer inline style has another 'style' tag inside of it
style:list-style-type: none;

remove that first
0
 
dwkdCommented:
you need to start at the top with the width:100%
body is not the top element

first is html
so:

html {
      height: 100%;
}

then

body{
       height: 100%;
}

then

#container {
      height: 100%;
}

0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
David S.Commented:
0
 
dwkdCommented:
i swear to Budha i didn't copy your answer :)
0
 
David S.Commented:
It's a widely known technique.  I'd use "min-height" instead of "height" for "#container" so that it will expand as needed.
0
 
dwkdCommented:
non-floated extra content will force the height to expand either way
0
 
dwkdCommented:
correct! ..props!
0
 
dwkdCommented:
ha, you win! ...and you didn't even give the answer(in this post)  :)
0
 
David S.Commented:
It might not last. I requested the attention of a moderator before you made your initial reply. The moderator might delete this or split the points when he reviews this.
0
 
dwkdCommented:
s'all good
0
All Courses

From novice to tech pro — start learning today.