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中）。

您應該重新考慮您的設計策略以及您想要實現的目標。可能還有其他方法可以實現你打算做的事情，你介意給我們介紹一下嗎？