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?
Have you tried setting this as well?
html, body{
height: 100%;
width: 100%;
}
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;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.