1
假设一个例子：如何设置绝对定位的孩子（不是重复）的父div的100％的高度？
<!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解决方案。
而且，我不能摆脱position:absolute属性#info-block元素，因为它是交互式水平手风琴的一部分。
在此先感谢。
将绝对定位的元素从布局中移除，这意味着它们的高度/宽度不会影响其他元素的位置/尺寸。 – carpenumidium