height:100% cuts off at bottom of viewport

[curtis_b]

Hi, I've googled this issue (and searched here) and the explanation I've found is that the parent divs need to have height:100% (html,body), but that solution doesn't seem to be working for me.

Check out the site: http://7cpco.com/beta/index.html

and the css: http://7cpco.com/beta/css.css

If it all fits in your screen, resize your window (to be smaller), what's happening is that when the content extends beyond the viewport, the background will not keep going, it stops before the content ends (in both FF and IE).

Thanks for your help!
Curt

[michaellunsford]

Very nice looking site. Very complex CSS, though.

In my experience, using a single image as the background for the entire HTML, BODY works best. You can still do a centered <DIV> with a header and footer, all your corner graphics, etc. So long as the background image is part of the HTML, BODY it should stretch just fine.

Now, that being said, you might be able to get your code working with floats and clears. See if this helps:

http://www.greywyvern.com/code/min-height-hack.html

[Stopofeger]

its beacuse when the element overflows it is set to cut off.
use this rule [code]overflow:auto[/code] in body and global wrapper.
I hope this will help.