css - 如何阻止绝对定位元素的父元素折叠

Question

如何阻止绝对定位元素的父元素折叠？

在下面的代码中，外层div的高度为0:

<div id="outer" style="position: relative;">
    <div id="inner" style="position: absolute; height: 100px;">
        <p>This is the inner content.</p>
    </div>            
</div>

这与这个问题非常相似，How do you keep parents of floated elements from collapsing? ，它处理 float 元素，但是我尝试了一些解决方案(包括 spacer 和 clearfix 类)，但它们不起作用。

谢谢!

Answer 1

你不能:一旦 child 处于绝对位置，它实际上就在 parent 的“外面”(在外观上)。

如果你包含了 jquery，你可以做的是使用这个不优雅的 hack:

$(".absolutepos").each(function() {
    $(this).parent().css("height",$(this).height());
});

并在将 div 置于绝对位置时添加“absolutepos”类:

<div id="outer" style="position: relative;">
    <div id="inner absolutepos" style="position: absolute; height: 100px;">
        <p>This is the inner content.</p>
    </div>            
</div>