Hi, thanks. That would work, but breaks if the text is longer than the browser height. A scrollbar is shows but when you scroll down, the wrapper stops at 100%.
Hi, you need to repeat y a background image on the container. Or drop in another div to hold the background color. Give the div position absolute and top/bottom 0
Please read the CSS faq on 100% height before attempting this as you cannot nest multiple 100% high elements and you cannot base height on an element that has min-height either.
(BTW don’t use the important hack for 100% height either as IE7 breaks badly with it. Just use the star selector hack for iE6 instead It’s less code and 100% safe. :))
You can only ever have one 100% high element in your page and that is the first min-height:100% element (#wrapper in your case). You have one shot at creating 100% high effects and they must all be done on this element.
You can as Eric suggests repeat a background image on #wrapper to give you the faux column 100% high effect.
In your original example if you are just looking for gray borders then do it all in one div and use borders for the outer colour.
There are other methods of creating 100% backgrounds but are a little complicated.
(Also don’t call everything div#wrapper, div#page as Ids are unique and that’s just a waste of code. Just use #wrapper and #page etc as it is unlikely that you want to isolate the id by its type selector anyway.)