我更喜欢只使用CSS。
我有一个包含绝对元素的相对元素。我希望根据绝对元素的大小来确定相对元素的大小,换句话说,它应该整齐地包裹它。为了说明,在这个小提琴中,"页脚"位于" 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;
}
答案 0 :(得分:3)
当你在一个元素上使用position:absolute时,你会“将它从流中取出”。据我所知,你无法获得基于绝对定位元素的大小。您必须在标题包装器上设置高度,或使用javascript来实现效果。
为什么你必须使用绝对位置?
答案 1 :(得分:1)
对于仅CSS的解决方案,我唯一能想到的是为header-wrapper添加一个高度。如果div中的内容是静态的,这将解决您的问题,但如果它是动态的,您将被迫使用某种JavaScript解决方案。