Question

假设一个例子：

<!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。（截图如下）。

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

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

一个有效的解决方案 - 使用jQuery并将#info-block的高度与body的高度进行比较，并递归地应用于body，{{1} }和#wrapper。但这是错的。寻找仅限CSS的解决方案。

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

提前致谢。

Answer 1

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

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

似乎你不能在最小高度的Chrome / Safari / Firefox中继承高度。也许这就是问题？线程中有jQuery问题解决，以及有人报告显示：block;应该解决这个问题。

看看！

如何设置父div的100％高度与绝对定位的子（不重复）？

1 个答案: