Div没有高度

时间:2014-06-12 21:39:44

标签: html css

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

1 个答案:

答案 0 :(得分:11)

它不起作用(即父元素没有任何高度),因为.wrapper元素的所有直接后代都是绝对定位的 - 这将使它们脱离文档流,因此导致父级的维度崩溃为空。

  

您还会注意到父包装的effect is the same when you float all descendants,因为float也有。{3}}   将正常元素排除在文档流程之外的效果。

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

  1. 您可以明确说明父级的高度(请参阅example fiddle
  2. 或使用不依赖于其内容的相对高度(例如,percentagesviewport units)。
  3. 您应该重新考虑您的设计策略,以及您尝试实现的目标。可能有其他方法可以实现您的目标,您介意向我们展示吗?