My problem is I want a div to expand 100% of the height of the screen (no scrolling), with a little bit of padding. I have this working fine in every browser I could test in (Opera, Firefox, Safari), except IE6 by setting positioning to absolute and top and bottom to 3px. In IE, it doesn't expand correctly. I've also tried setting the height to be 100% with a padding, and putting another div in it, but of course that would work in IE quirksmode but not in anything using the w3c box model, as it would expand outside of the page.
Here is the code for what I have so far:
Code:
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>100% height using absolute positioning</title>
<style type="text/css" media="screen">
html {
height: 100%;
}
body {
margin: 0px;
height: 100%;
}
#div1 {
background: green;
width: 200px; height: 100%;
}
#div2 {
background: skyblue;
width: 190px;
border: 2px solid black;
position: absolute; left: 3px; top: 3px; bottom: 3px;
}
</style>
</head>
<body>
<div id="div1">
<div id="div2">
</div>
</div>
</body>
</html>
Thanks in advance,
—Korolen
Before you post, read our: 
