100% height container is pushed out of IE viewport by absolute positioning_问答_开发者

100% height container is pushed out of IE viewport by absolute positioning

开发者 https://www.devze.com 2023-01-20 08:32 出处：网络

The following behaves exactly as I expect it to in Firefox and Safari, but the solution for Internet Explorer eludes me.

The Issue: Non-IE browsers show the container properly pushed away from the sides of the viewport. 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.

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

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).
This must work in IE 7+ and Firefox 3+ at a minimum.
If this results in an "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.

This uses a little IE specific (nonstandard) code to fix the behavior for 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>