Div没有高度

Question

为什么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; 
} 

Answer 1

它不工作（即父元素没有任何高度），因为所有的.wrapper元素的直接后代是绝对定位的 - 这将具有将它们从文档流中取出的效果，因此导致pa租的维度崩溃到没有。

您还会注意到父包装的effect is the same when you float all descendants，因为float也有责任采取正常的元素出来的文档流的 效果。

只有两种方法来防止这种情况发生，这两个涉及声明一定高度父.wrapper元素：

1. 要么可以明确的高度父（见example fiddle）
2. 或使用不依赖于其内容的相对高度（例如，在percentages或viewport units中）。

您应该重新考虑您的设计策略以及您想要实现的目标。可能还有其他方法可以实现你打算做的事情，你介意给我们介绍一下吗？