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