1

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:

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

Height of actual content is 522px Height calculated is 227px, which is wrong

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.

Aleksandr Makov
  • 2,820
  • 3
  • 37
  • 62
  • Absolutely positioned elements are removed from the layout, meaning their height/width will not affect other element's position/dimensions. – carpenumidium Sep 17 '12 at 14:18

1 Answers1

0

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!

Community
  • 1
  • 1
Hanzo Hasashi
  • 46
  • 6