I’ve worked around a couple of times with DIVs using height:100% and I had no problems at all, testing on may browsers (IE7, IE6, 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 Transitional//EN" "... no links allowed ...">
<html>
<head>
<style type="text/css">
body {background-color:#999999;}
html, body {margin:0; padding:0;}
/* IE6 Hack */
* html html {height:100%;}
/* IE6 Hack */
* html body {height:100%;}
*, body {margin:0; padding:0;}
.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>