divs垂直擴展以適合他們的子div嗎？

我無法讓我的div與他們的子div一起垂直擴展。divs垂直擴展以適合他們的子div嗎？

我有這樣的事情：

<div class='headerWrapper'> 
    <div class='header'> 
     <img..... height=100> 
    </div> 
</div>

在螢火，頭div有100的高度，該headerWrapper div有0

的高度的圖像是可見在div下方它....在headerWrapper div沒有固定的高度。

那麼困惑。

Thanks- 喬納森

來源

2011-03-27 Jonathan

你可以發表你的風格嗎？特別是'.header'或其內容是否浮動或絕對定位？ – marramgrass 2011-03-27 16:05:49

檢查，看看是否有你的頭格設置爲浮動。

當一個子元素漂浮及其家長不，這將導致父元素「崩潰」，以0

高度此page似乎有問題的一個很好的說明大約一半下來頁。

來源

2011-03-27 16:09:25

我發現[Clearing Floats]（http://www.quirksmode.org/css/clearing.html）非常有幫助。我不確定父容器是否漂浮真的很重要。即使父容器本身漂浮，它是否仍然包含其漂浮的孩子？ – DavidRR 2014-09-16 12:28:04

如果浮動它們，你可以用一個可愛的CSS技巧，使EM高:)

解決方案1：自動溢出父母

<style type="text/css"> 
    .headerWrapper {overflow: auto;} 
    .header {overflow: auto;} 
</stlye> 
<div class='headerWrapper'> 
    <div class='header'> 
     <img..... height=100> 
    </div> 
</div>

解決方案2：後EM使用clearfix

<style type="text/css"> 
    .clearfix:after {visibility: hidden;display: block;font-size: 0;content: " ";clear: both;height: 0;} 
</stlye> 
<div class='headerWrapper clearfix'> 
    <div class='header clearfix'> 
     <img..... height=100> 
    </div> 
</div>

來源

2011-03-27 16:09:56

divs垂直擴展以適合他們的子div嗎？

回答

相關問題