Getting a div to stretch to the bottom of the browser

Hi all,

Firstly, I would just like to thank everyone for their help so far. I don’t really do webdesign full time, so I’m kind of learning css tricks on the fly here.

Anyways, my new (and hopefully last) problem is to make my footer div stretch to the bottom of the browser. I highlighted the footer green so you can see what’s currently happening.

Right now, I have my body and html height tags set to 100%. I then made my footer div (which sits outside my main container) to 100% height.

What happens it that the div is stretching way more than the browser window. Take a look to see what I mean.

http://www.manufa*cturing-pro.com/test.html
(remove the *)

My css file is located at:
http://www.manufa*cturing-pro.com/css/basic.css
(again, remove the *)

When you set the height to 100% it means just that - 100% of the set height of the parent container, which is the height of the screen plus 18px of padding in your case. It does not mean “fill the height”, which can’t be done.

If you want the footer at the bottom unless content pushes it down, then the footer should be a set height and the container made min-height 100% - the footer is then pulled back into view with a negative top margin equal to its height.

http://www.ryanreese.net/articles/sticky-footer-example.php

As there is a lot of text in the footer div, I would tend to set an em height rather than pixel height.

If you set to a px height then what if the text gets resized? Since it is px it won’t expand also and the text will overflow out of the content area.

Still does not work in Opera. Resize your browser after it loads.

Look through this thread for an explanation on the various height trigger methods for Opera.

I set the main container to -100% height and the footer to 200 pixel, but the screen still doubles. My body and html tags are still set to %100 height.

I don’t need the footer to float to the bottom of each page, I just want the footer div to stretch to the bottom of each page.

I upgraded my example. You must have saw my code when messing wtih it.

Is the footer supposed to have a background colour normally (you said the green was just to see it), as removing the background and footer height of 100% from your original example seems to look ok. The whole page is greater than the screen height anyway unless you are using a huge monitor.

Hey, well the footer has a background that I would like to continue if the browser expands.

Probably the easiest way to do that is to have another wrapper div that surrounds the #container div, and apply the main background to that instead of the body - the required background for the footer can then be applied to the body, and all 100% heights removed.

I’ll give it a go.