[thelist] JavaScript for body wrapper to be 100% height

jono at charlestonwebsolutions.com jono at charlestonwebsolutions.com
Mon Jan 8 14:39:36 CST 2007

I know there are JavaScript solutions to make columns equal height; does
anybody have a JavaScript solution that can make a "wrapper" <div> 100% of
page's body width and height?

The problem:
In Quirksmode, in IE 6.0, if I place a wrapper <div> around an entire
layout and set the background color to be #000 and set the height to 100%
the wrapper will not fill out the entire background area with the #000

I cannot set the body's background to be #000 because a WYSIWYG editor I
have to use inherits the body's bg color - if the body's bg color is dark,
and the body text is dark, the WYSIWYG editor renders the body text
unreadable while editing the text in the editor.

To avoid setting a background color on the body, I need to be able to get
a <div id="wrapper"> to fill out 100% of the body's width and height so
that I can set the #wrapper to have a background of #000; thus leaving the
body's bg color #fff.

I tried a few things that work in Firefox, but cannot get the CSS to work
in IE in Quirksmode.

/* example of what I've tried
---------------------------------- */
body, html {
margin: 0;
padding: 0;
height: 100%;
#wrapper {
display: block;
height: 100%;

So, si there JavaScript that will tell the #wrapper to be 100% of the
body's height, and fill the #wrapper <div> with a background color?

Does this make sense?

Jono Young
Designer | Developer | Illustrator
Charleston Web Solutions
Bringing Higher Standards to the Lowcountry

More information about the thelist mailing list