How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?

问题

Suppose an example:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <style type="text/css">
        html, body  { height:100%; width:100%; padding:0; margin:0; }
        body        { overflow:scroll; }
        #wrapper    { background:#5f9ea0; width:500px; height:100%; min-height:100%; margin:0 auto; overflow:auto; }
        #content    { background:#336699; width:400px; height:100%; min-height:100%; margin:0 auto; overflow-x:hidden; position:relative;}
        #info-block { background:#d2691e; width:300px; left:20px; position:absolute; }
    </style>
</head>
<body>
    <div id="wrapper">
        <div id="content">
            <div id="info-block">Info..<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>...End</div>
        </div>
    </div>
</body>
</html>

There's couple of problems with this example:

It puts scrollbars into the wrong place #content instead of body.
The body, #wrapper nor #content get a proper height calculated. Expected is 522px instead of 227px. (screenshot below).

So the actual problem is I need the page to get the height of the content of the #info-block element. Tried may different setting, all fail.

The one solution that works - is using jQuery and comparing the height of the #info-block against the height of the body, and apply it recursively to the body, #wrapper and #content. But this is just wrong. Looking for CSS only solution.

And, I can't get rid of position:absolute property of #info-block element, because it's a part of interactive horizontal accordion.

Thanks in advance.

回答1:

A similar question was asked in another Stackoverflow thread, I will link the thread for your viewing.

child inside parent with min-height 100% not inheriting height

It seem's that you cant inherit height in Chrome/Safari/Firefox with min-height. Maybe that is the issue? There is the jQuery problem solve in the thread, as well as someone reporting that display: block; should solve the issue.

Have a look!

来源：https://stackoverflow.com/questions/12460054/how-to-set-100-height-of-a-parent-div-with-absolutely-positioned-children-not

标签

jquery

html

css

height

css-position