html - 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 元素的所有直接后代都是绝对定位的——这将产生将它们从流中移除的效果文档，因此导致父维度崩溃为空。

You will also notice that the effect is the same when you float all descendants of the parent wrapper, because float also has the effect of taking normal elements out of the document flow.

只有两种方法可以防止这种情况发生，这两种方法都涉及为父 .wrapper 元素声明特定高度:

1. 或者您明确说明 parent 的高度(参见 example fiddle)
2. 或者使用不依赖于其自身内容的相对高度(例如，在 percentages 或 viewport units 中)。

您应该重新考虑您的设计策略，以及您想要实现的目标。可能还有其他方法可以实现您的目标，您介意向我们展示一下吗？