Html 如何使相对div展开以适合其绝对内容？

我更喜欢只使用CSS

我有一个相对元素，它包含一个绝对元素。我希望相对元素的大小取决于绝对元素的大小，所以换句话说，它应该整齐地围绕着它。举例来说，在这把小提琴中，“页脚”位于“页眉包装器”下面，但它与它的内容重叠，因为“页眉包装器”忽略了它的绝对内容：

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>

---

在元素上使用position:absolute时，您可以“将其从流中取出”。据我所知，无法根据绝对定位的元素获得尺寸。您必须在标题包装器上设置高度，或者使用javascript来实现此效果

---

为什么必须使用position absolute？

在元素上使用position:absolute时，您“将其从流中取出”。据我所知，无法根据绝对定位的元素获得尺寸。您必须在标题包装器上设置高度，或者使用javascript来实现此效果

---

为什么必须使用position absolute？

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

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

您尝试过吗？@Rulisp抱歉，我本应该清楚，我想知道是否有CSS解决方案。恐怕这是不可能的。您尝试过吗？@Rulisp抱歉，我本应该清楚，我想知道是否有一个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;
}