通过绝对定位将100％高度的容器推出IE视口

Question

以下行为完全符合我在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找到合适的组合。

Answer 1

这使用一些特定于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>

通过绝对定位将100％高度的容器推出IE视口

问题描述

1 个解决方案

解决方案1
0 2010-10-14 00:58:29

通过绝对定位将100％高度的容器推出IE视口

问题描述

1 个解决方案

解决方案1 0 2010-10-14 00:58:29

解决方案1
0 2010-10-14 00:58:29