I’ve worked around a couple of times with DIVs using height:100% and I had no problems at all, testing on many browsers (IE7, FF3, FF2, Opera, Safari and Chrome).
Now I’ve tried the same idea on a new website and I can’t see what’s going wrong on IE6. The DIV never covers the entire page.
Any ideas? Thanks for your help,
Emerson
The entire code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
-
-
<html xmlns="http://www.w3.org/1999/xhtml">
-
<head>
-
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
-
-
<style type="text/css">
-
body {background-color:#999999;}
-
-
html, body {margin:0; padding:0; height:100%;}
-
-
.outerContainer {width:100%; min-height:100%; position:absolute; display:block;}
-
-
/* IE6 Hack */
-
-
* html .outerContainer {height:100%;}
-
-
.mainDiv {width:1000px; margin:0 auto 0 auto; display:block; background-color:#C0C0C0;}
-
-
.lockerContainer {width:100%; height:100%; position:absolute; top:0px; left:0px; background-color:transparent; background-color:#000000; opacity:.6; filter:alpha(opacity=60); z-index:20;}
-
</style>
-
</head>
-
<body>
-
<div class="outerContainer">
-
<div class="mainDiv">
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
-
</div>
-
<div class="lockerContainer"></div>
-
</div>
-
</body>
-
</html>
-
