1

假设一个例子：

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

这个例子有几个问题：

  1. 它将滚动条放入错误的位置，#content而不是body.
  2. ,body也#wrapper没有#content计算出合适的高度。预期是522px而不是227px. （下面的屏幕截图）。

实际内容高度为 522px 计算的高度是227px，这是错误的

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

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

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

提前致谢。

4

1 回答 1

0

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

最小高度为 100% 的父级内部的子级不继承高度

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

看一看！

于 2012-09-17T13:29:05.003 回答