IE6 full screen div

Question

Basically, I have to present a full-screen div on my page for various reasons. Now this is relatively straightforward in non-IE browsers (absolute positioning, top/left/right/bottom at 0px) and can be easily done on IE7 too (with some tweaking) however I just can't get it working on IE6.

What's weird that I can get it working in quirks mode but when I turn on standards compliance mode, the div does not fill horizontally the screen. Unfortunately, I need standards compliance mode for other elements on the page.

Here's my CSS:

div#myId
{
    background-color: #3070cf;
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    width: 100%; /* Removing width or height doesn't help either */
    height: 100%;
}

My demo page is basically a standards-compliant XHTML with the appropriate DOCTYPE having only this single div (id="myId") in its body.

Now I know that absolute positioning is generally not a good idea, but as I said, I really need it in this case. Anyone any suggestions?

Answer 1

Have you tried setting this as well?

html, body{
  height: 100%;
  width: 100%;
}

Answer 2

I have been able to accomplish such feats by first giving the body the following styles:

body
{
   height: 100%;
   width: 100%;
}

Then, the full size div can be given the following:

div#myId
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%
}

This seems to work in most major browsers. Note too that IE will create a disabled scroll bar on the right of the page at all times. If you do not want this, you can add the following:

html
{
  overflow: auto;
}