如何根据内部绝对高度调整相对div高度？

Question

例如:http://jsfiddle.net/MYvYy/182/

我在'outer_box'中有很多'inner_box'元素.Inner_box元素绝对.

我想调整outer_box高度,以便所有inner_box元素都适合outer_box.

我知道可以用js完成.但我真的不喜欢用脚本调整样式.

所以我想知道是否可以使用CSS完成？

Answer 1

单独使用CSS是不可能的.

布局流程:

元素position:absolute位于页面其余部分的布局流程之外.就亲属而言,绝对子在布局中不占用空间.

如果您需要在容器内嵌套弹出窗口或导航菜单,这非常有用,因为它不会影响容器的布局.这是一种position:absolute非常适合的用例.

固定高度:

如果您需要绝对内容的行为就像它是布局流程的一部分一样,请使用固定高度.为相对父级和绝对子级提供固定高度,并避免在绝对子级之前放置任何可变高度子元素.如果变量高度内容确实在它之前,请在绝对子项需要出现的位置使用具有固定高度的相对占位符div.

如果position:absolute必须使用并且固定高度不是一个选项,请使用JavaScript.

Answer 2

我有一些解决这个问题的方法,它可能不适合你的情况,但考虑一下.
首先,我们需要复制您想要使父级扩展到其高度的所有绝对定位div.所以你的HTML样子会是这样的.

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box ghost">1</div>
</div>

然后我们需要像这样添加"ghost div"CSS:

.inner_box.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}