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:
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:
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>
Comment