以下行为完全符合我在Firefox和Safari中的预期，但是Internet Explorer的解决方案使我难以理解。
问题：非IE浏览器显示容器已正确地从视口的侧面推开。但是，IE在容器上保持严格的100％高度（大概基于该容器的父级），而是偏移容器，将其推离视口底部。
<!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>
绝对放置的容器可容纳两个高度为50％的元素。
要求如下：
容器的位置是任意的，但是必须将其从视口的侧面推开，而不要依赖于视口的填充。
调整视口大小时，容器中两个元素的高度必须根据百分比值（当前每个为50％）调整大小。
至少必须在IE 7+和Firefox 3+中运行。
如果这导致“ OH DUH！”对于我来说，这一刻，你将尽量不要幸灾乐祸。
我已经尝试了HTML和BODY元素上的position和height属性的许多组合，但是显然没有为IE找到合适的组合。
最佳答案
这使用一些特定于IE的（非标准）代码来修复IE7的行为。其他浏览器没有任何改变。
<!DOCTYPE html>
<html>
<title>The Splits</title>
<head>
<!-- saved from url=(0014)about:internet -->
<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>
<!--[if IE 7]>
<style>
div#one,
div#two {
height:expression(((this.parentElement.offsetHeight-70)/2)+'px');
}
</style>
<![endif]-->
</head>
<body>
<div id="container">
<div id="one">top</div>
<div id="two">bottom</div>
</div>
</body>
</html>