Html 如何相对于内部绝对高度调整相对div高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11492055/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to adjust relative div height with respect to inner absolute height?
提问by Arturs Vancans
For example: http://jsfiddle.net/MYvYy/182/
例如：http: //jsfiddle.net/MYvYy/182/
I have a lot of 'inner_box' elements inside of 'outer_box'. Inner_box elements a absolute.
我在“outer_box”中有很多“inner_box”元素。Inner_box 元素是绝对的。
I would like to adjust the outer_box height so that all inner_box elements fit in the outer_box.
我想调整outer_box 的高度，以便所有inner_box 元素都适合outer_box。
I know it can be done with js. But I don't really like adjusting style with scripts.
我知道它可以用js完成。但我真的不喜欢用脚本调整风格。
So I was wondering if it is possible to be done using CSS?
所以我想知道是否可以使用 CSS 来完成？
采纳答案by Matt Coughlin
It's not possible with CSS alone.
单独使用 CSS 是不可能的。
Layout flow:
布局流程：
An element with position:absoluteis outside of the layout flow of the rest of the page. As far as the relative parent is concerned, the absolute child occupies no space in the layout.
一个元素position:absolute在页面其余部分的布局流之外。就相对父级而言，绝对子级在布局中不占用空间。
This is very useful if you need to have a pop-up or a nav menu nested inside a container, because it won't affect the layout of the container. That's the sort of use case that position:absoluteis well-suited for.
如果您需要在容器内嵌套弹出菜单或导航菜单，这将非常有用，因为它不会影响容器的布局。这是一种position:absolute非常适合的用例。
Fixed height:
固定高度：
If you need absolute content to behave as if it's a part of the layout flow, use fixed height. Give the relative parent and the absolute child a fixed height, and avoid placing any variable-height child elements before the absolute child. If variable-height content does precede it, use a relative placeholder div with a fixed height at the location where the absolute child needs to appear.
如果您需要绝对内容表现得好像它是布局流程的一部分，请使用固定高度。给相对父元素和绝对子元素一个固定的高度，并避免在绝对子元素之前放置任何可变高度的子元素。如果可变高度内容确实在它之前，请在绝对子项需要出现的位置使用具有固定高度的相对占位符 div。
If position:absolutehas to be used and fixed height is not an option, use JavaScript.
如果position:absolute必须使用且不能选择固定高度，请使用 JavaScript。
回答by Abood Sy
I have some workaround for this problem, it may not fit your situation but consider looking at it.
First of all we need to duplicate all absolute positioned divwhich you want to make the parent extend to its height.
So your HTMLwill look like this.
我有一些解决此问题的方法，它可能不适合您的情况，但请考虑查看它。
首先，我们需要复制您想让父级扩展到其高度的所有绝对定位 div。所以你HTML会看起来像这样。
<div class="outer_box">
<div class="inner_box">1</div>
<div class="inner_box ghost">1</div>
</div>
Then we need to add the "ghost div" CSS like so:
然后我们需要像这样添加“ghost div”CSS：
.inner_box.ghost{
visibility: hidden;
width: 100%;
top: 0;
left: 0;
position: relative;
}
回答by Alaa Badran
I only can provide you with Javscript fix for this using jQuery lib. let me know if you use it or not,
我只能使用 jQuery lib 为您提供 JavaScript 修复程序。让我知道你是否使用它，
$('.outer_box').height($('.inner_box').outerHeight());
This line will fix the outer_box height
这条线将修复outer_box的高度
回答by Alaa Badran
I fixed it by changing the position property of div.inner_boxinto
我通过将div.inner_box的 position 属性更改为
position:relative
if this is not what you'r looking for, or this didn't fix it, then you will have to use Javascript.
如果这不是你要找的，或者这没有解决它，那么你将不得不使用 Javascript。
