100%高度容器被绝对定位推出IE视口答案

【问题标题】：100% height container is pushed out of IE viewport by absolute positioning100%高度容器被绝对定位推出IE视口
【发布时间】：2010-10-14 08:58:29
【问题描述】：

下面的行为与我在 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 的组合。

【问题讨论】：

您的代码在 IE 8、FF 3.6 和 Chrome v8 中对我的工作方式相同。不过，我不能与早期版本交谈。

标签： html css internet-explorer layout

【解决方案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>

【讨论】：

这实际上是一个很好的解决问题的方法，我会使用它。非常感谢非常！但是，它不像 Firefox 那样对待父容器 (#container)，它的背景颜色显示在 div#two 下方。虽然这是一个非常可行的解决方案，但我仍然很想知道这是否可以使用通用 CSS 解决方案来解决，或者它是否是 Internet Explorer 中的限制或错误？
我不确定您所说的“通用”CSS 解决方案是什么意思。这些天我写标准，然后在有条件的评论中修复 IE6/IE7。这样做只是节省时间和精力。至于它是否是一个“错误”，几乎一切都是。如果对您有帮助，请“接受”我的回答。谢谢。