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

编程入门行业动态更新时间:2024-10-28 10:22:24

本文介绍了如何设置父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;高度：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 而不是 body li>

正文， #wrapper 或 #content 获得适当的高度计算。预期为 522px ，而不是 227px 。（下面的屏幕截图）。

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

一个解决方案 - 使用jQuery并比较＃info-block 对 body 的高度递增地应用到 body ， #wrapper 和 #content 。但这只是错了。寻找CSS的解决方案。

而且，我不能摆脱 position：absolute c $ c>＃info-block 元素，因为它是交互式水平手风琴的一部分。

提前感谢。

解决方案

另一个Stackoverflow线程，我将链接该线程供您查看。

父级内的子级，最小高度100％不继承高度

你不能继承在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 #content instead of body.

The body, #wrapper nor #content get a proper height calculated. Expected is 522px instead of 227px. (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.