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元素上尝试了很多位置和高度属性的组合，但显然没有找到适合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 个答案: