The following behaves exactly as I expect it to in Firefox and Safari, but the solution for Internet Explorer eludes me.
The Issue: Non-IE browsers show the container properly pushed away from the sides of the viewport. IE however, maintains a strict 100% height on the container (presumably based on a parent of that container) and instead offsets the container, pushing it off the bottom of the viewport.
<!DOCTYPE html>
<html>
<title>The Splits</title>
<head>
<style>
html, body {margin:0;padding:0;height:100%;}
html {
height:auto;
min-height:100%;
overflow:hidden;
}
div#container {
position:absolute;
top:50px;
right:20px;
bottom:20px;
width:290px;
max-height:100%;
#height:100%;
}
div#one,
div#two {
position:relative;
height:50%;
overflow:auto;
}
div#one {background-color:lightgreen;}
div#two {background-color: lightblue;}
</style>
</head>
<body>
<div id="container">
<div id="one">top</div>
<div id="two">bottom</div>
</div>
</body>
</html>
An absolutely positioned container holds two 50% height elements.
Requirements are as follows:
- The positioning of the container is arbitrary, but it must be pushed away from the sides of the viewport without relying on padding on the viewport.
- When the viewport is resized, the height of the two elements within the container must resize based on a percentage value (currently 50% each).
- This must work in IE 7+ and Firefox 3+ at a minimum.
- If this results in an "OH DUH!" moment for me, you will try not to gloat.
I've tried many combinations of position and height attributes on the HTML and BODY elements, but apparently have not hit upon the right one for IE.