While my code works seamlessly in Firefox and Safari, Internet Explorer presents a challenge I cannot seem to solve.
The Problem: In non-IE browsers, the container displays properly with space around the edges of the viewport. However, in IE, the container is constrained to a strict 100% height of a parent element which causes it to extend 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>
This code features an absolutely positioned container holding two elements each with a height of 50%.
Here are the requirements:
- The container can be positioned anywhere, but must not rely on viewport padding for spacing.
- When the viewport size changes, the height of the container's elements must adapt based on a percentage (currently set at 50% each).
- This layout should work on IE 7+ and Firefox 3+ at a minimum.
- If you find a simple solution, please resist the urge to gloat.
I've experimented with various combinations of positioning and height attributes, but have not found the right solution for IE.