我如何才能得到一个相对的div来扩展以适应它的绝对内容？

Question

我更愿意只使用CSS来完成这个任务。

我有一个相对元素，其中包含一个绝对元素。我希望根据绝对元素的大小来确定相对元素的大小，换句话说，它应该整齐地围绕在它周围。为了说明，在这个小提琴中，“脚注”位于“页眉包装器”下面，但它与其内容重叠，因为“页眉包装器”忽略了它的绝对内容：http://jsfiddle.net/cxmjdL78/1/。

<div class="wrapper">
    <div class="header-wrapper">
        <div class="header-1">HEADER HEADER HEADER</div>
        <div class="header-2">HEADER HEADER<br>HEADER HEADER</div>
    </div>
    <div class="footer">this text should go below the header</div>
</div>

CSS

.wrapper {
    position:relative;
    width:300px;
    height:300px;
}
.header-wrapper {
    position:relative;
}
.header-1 {
    position:absolute;
    background:#232323;
    width:100%;
    height:auto;
    opacity:0.4;
}
.header-2 {
    position:absolute;
    background:#323232;
    width:100%;
    height:auto;
    opacity:0.4;
}
.footer {
    position:relative;
    background:#26d452;
    opacity:0.4;
}

Answer 1

当你对一个元素使用“绝对”的位置时，你就会“把它从流中取出来”。据我所知，您不能根据绝对定位的元素获得大小。您必须设置标题包装器的高度，或者使用javascript来达到效果。

你为什么要用绝对的位置？

Answer 2

对于CSS唯一的解决方案，我唯一能想到的就是给标题包装增加一个高度。如果div中的内容是静态的，这将解决您的问题，但是如果它是动态的，您将被迫使用某种JavaScript解决方案。