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

Question

The following behaves exactly as I expect it to in Firefox and Safari, but the solution for Internet Explorer eludes me. 以下行为完全符合我在Firefox和Safari中的预期，但是Internet Explorer的解决方案使我难以理解。

The Issue : Non-IE browsers show the container properly pushed away from the sides of the viewport. 问题：非IE浏览器显示容器已正确地从视口的侧面推开。 IE however, maintains a strict 100% height on the container (presumably based on a parent of that container) and instead offsets the container, pushing it off the bottom of the viewport. 但是，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>

An absolutely positioned container holds two 50% height elements. 绝对放置的容器可容纳两个高度为50％的元素。

Requirements are as follows: 要求如下：

The positioning of the container is arbitrary, but it must be pushed away from the sides of the viewport without relying on padding on the viewport. 容器的位置是任意的，但是必须将其从视口的侧面推开，而不要依赖于视口上的填充。
When the viewport is resized, the height of the two elements within the container must resize based on a percentage value (currently 50% each). 调整视口大小时，容器中两个元素的高度必须根据百分比值（当前每个为50％）调整大小。
This must work in IE 7+ and Firefox 3+ at a minimum. 至少必须在IE 7+和Firefox 3+中运行。
If this results in an "OH DUH!" 如果这导致“ OH DUH！” moment for me, you will try not to gloat. 对于我来说，这一刻，你将尽量不要幸灾乐祸。

I've tried many combinations of position and height attributes on the HTML and BODY elements, but apparently have not hit upon the right one for IE. 我已经尝试了HTML和BODY元素上的position和height属性的许多组合，但是显然没有针对IE找到合适的组合。

Answer 1

This uses a little IE specific (nonstandard) code to fix the behavior for IE7. 这使用一些特定于IE的（非标准）代码来修复IE7的行为。 Nothing gets changed for other browsers. 其他浏览器没有任何改变。

<!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