html - 我怎样才能得到一个相对的 div 来扩展以适应它的绝对内容？

Question

我更愿意只使用 CSS 来做到这一点。

我有一个包含绝对元素的相对元素。我希望根据绝对元素的大小来调整相对元素的大小，换句话说，它应该整齐地环绕它。为了说明，在这个 fiddle 中，“页脚”位于“header-wrapper”下方，但它与它的内容重叠，因为“header-wrapper”忽略了它的绝对内容:http://jsfiddle.net/cxmjdL78/1/

HTML

<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

当您在元素上使用 position:absolute 时，您“将其从流中移除”。据我所知，您无法根据绝对定位的元素获得尺寸。您必须在 header-wrapper 上设置高度，或使用 javascript 来实现效果。

为什么一定要使用绝对位置？