如何使用绝对定位的子级（不是重复）设置父级 div 的 100% 高度？答案

【问题标题】：How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?如何使用绝对定位的子级（不是重复）设置父级 div 的 100% 高度？
【发布时间】：2012-09-09 17:11:23
【问题描述】：

假设一个例子：

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

这个例子有几个问题：

它将滚动条放到错误的位置 #content 而不是 body。
body、#wrapper 和 #content 得到一个合适的高度计算。预期为 522px 而不是 227px。（截图如下）。

所以实际的问题是我需要页面来获取#info-block 元素的内容的高度。尝试了可能不同的设置，都失败了。

一种可行的解决方案 - 使用 jQuery 并将#info-block 的高度与body 的高度进行比较，并将其递归地应用于body、#wrapper 和#content。但这是错误的。寻找仅 CSS 的解决方案。

而且，我无法摆脱#info-block 元素的position:absolute 属性，因为它是交互式水平手风琴的一部分。

提前致谢。

【问题讨论】：

绝对定位的元素会从布局中移除，这意味着它们的高度/宽度不会影响其他元素的位置/尺寸。

标签： jquery html css height css-position

【解决方案1】：

在另一个 Stackoverflow 线程中提出了类似的问题，我将链接该线程以供您查看。

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

您似乎无法在 Chrome/Safari/Firefox 中使用 min-height 继承高度。也许这就是问题所在？线程中有jQuery问题解决，以及有人报告显示：块；应该可以解决问题。

看看吧！

【讨论】：

谢谢。读过。但我的问题是反对的：我的父母没有继承孩子的身高。