如何设置父div的100％的高度与绝对定位的儿童（不是重复）？ [英] How to set 100% height of a parent div with absolutely positioned children (not a duplicate)?
问题描述
假设一个例子：
<！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;高度：100％; min-height：100％; margin：0 auto; overflow：auto; }
#content {background：＃336699; width：400px;高度：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>资料...< 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而不是bodyli>
-
正文，#wrapper或#content获得适当的高度计算。预期为522px，而不是227px。 （下面的屏幕截图）。
所以实际的问题是我需要页面来获取＃info-block 元素的内容的高度。尝试可能不同的设置，都会失败。
一个解决方案 - 使用jQuery并比较＃info-block 对 body 的高度递增地应用到 body ， #wrapper 和 #content 。但这只是错了。寻找CSS的解决方案。
而且，我不能摆脱 position：absolute c $ c>＃info-block 元素，因为它是交互式水平手风琴的一部分。
提前感谢。
另一个Stackoverflow线程，我将链接该线程供您查看。
你不能继承在Chrome / Safari / Firefox的最小高度的高度。也许这是问题？有在线程中的jQuery问题解决，以及有人报告显示：块;应该可以解决这个问题。
看看！
Suppose an example:
<!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>
There's couple of problems with this example:
- It puts scrollbars into the wrong place
#contentinstead ofbody. - The
body,#wrappernor#contentget a proper height calculated. Expected is522pxinstead of227px. (screenshot below).
So the actual problem is I need the page to get the height of the content of the #info-block element. Tried may different setting, all fail.
The one solution that works - is using jQuery and comparing the height of the #info-block against the height of the body, and apply it recursively to the body, #wrapper and #content. But this is just wrong. Looking for CSS only solution.
And, I can't get rid of position:absolute property of #info-block element, because it's a part of interactive horizontal accordion.
Thanks in advance.
A similar question was asked in another Stackoverflow thread, I will link the thread for your viewing.
child inside parent with min-height 100% not inheriting height
It seem's that you cant inherit height in Chrome/Safari/Firefox with min-height. Maybe that is the issue? There is the jQuery problem solve in the thread, as well as someone reporting that display: block; should solve the issue.
Have a look!
这篇关于如何设置父div的100％的高度与绝对定位的儿童（不是重复）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
