为什么wrapper
div没有高度?如果我设置了高度(height:200px
),则会显示绿色背景,但如何设置自动高度?
这是我的代码(JSFiddle):
HTML:
<div class="wrapper">
<div class="effect"></div>
<div class="content">
...content
</div>
</div>
CSS:
.content {
position: absolute;
background-color:red;
}
.wrapper, .effect {
background: green;
}
.wrapper {
position: relative;
width: 630px;
}
.effect {
width:100%;
position: absolute;
}
答案 0 :(得分:11)
它不起作用(即父元素没有任何高度),因为.wrapper
元素的所有直接后代都是绝对定位的 - 这将使它们脱离文档流,因此导致父级的维度崩溃为空。
您还会注意到父包装的effect is the same when you float all descendants,因为
float
也有。{3}} 将正常元素排除在文档流程之外的效果。
只有两种方法可以防止这种情况发生,这两种方法都涉及为父.wrapper
元素声明一定的高度:
您应该重新考虑您的设计策略,以及您尝试实现的目标。可能有其他方法可以实现您的目标,您介意向我们展示吗?