爲什麼min-height不起作用？我的HTML代碼

喜一部分是這樣的爲什麼min-height不起作用？我的HTML代碼

<div id="container"> 
<div id="content"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</div>

在CSS我有

#content 
{ 

    min-height:600px; 
}

但我希望這個id爲內容div來延長高度沒有發生。如何解決這個問題？

一個完整的代碼，你可以在此的jsfiddle鏈接http://jsfiddle.net/eYMz3/

來源

2014-02-24 Krish Gowda

'container' < - 無效的標籤和您共享的代碼適用於我http://jsfiddle.net/eYMz3/1/ –

哇，這是很多代碼在你的小提琴！來自你的問題的代碼[按指定的方式工作]（http://jsfiddle.net/8Z54J/）。請嘗試縮小問題範圍，並在問題*中包含一個[最小重複]（http://sscce.org）*。 – Jeroen

你想把「照片故事」'div'放在灰色背景裏嗎？ –

您需要設置overflow:hidden在#content

http://jsfiddle.net/eYMz3/3/

的問題是要伸展#content是未清除的浮動元素。這些不會拉伸他們的父母。

如果使用非overflow: visible（默認行爲）等任何東西，它會使用，這將基本清除浮動塊格式化的內容。

w3 Documentation

你也可以添加<div style="clear:both;"></div>只是你#content div的年底前清除浮動。

來源

2014-02-24 14:15:24 smerny

謝謝。解決了這個問題。我不明白如何。 –

@KrishGowda，更新了一些解釋。 – smerny

感謝您的解釋。這是更好的做法？溢出：隱藏或清除：都?? –

檢查

你的代碼更改爲：

<div id="container"> 
<div id="content"> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 
</div>

應該這樣做，因爲在它自己的「集裝箱」是無效的

來源

2014-02-24 14:08:05 SaturnsEye

除非用Javascript明確定義，否則自定義標籤名稱不會呈現。 – Kroltan

謝謝。我更新了代碼。但結果仍然相同。 –

這裏的問題是，你正在使用float S，但從來沒有清除它們，這意味着父元素不知道的高度延伸到。

要解決這個問題：

您可以使用微clearfix黑客從http://nicolasgallagher.com/micro-clearfix-hack/

/** 
* For modern browsers 
* 1. The space content is one way to avoid an Opera bug when the 
* contenteditable attribute is included anywhere else in the document. 
* Otherwise it causes space to appear at the top and bottom of elements 
* that are clearfixed. 
* 2. The use of `table` rather than `block` is only necessary if using 
* `:before` to contain the top-margins of child elements. 
*/ 
.cf:before, 
.cf:after { 
    content: " "; /* 1 */ 
    display: table; /* 2 */ 
} 

.cf:after { 
    clear: both; 
} 

/** 
* For IE 6/7 only 
* Include this rule to trigger hasLayout and contain floats. 
*/ 
.cf { 
    *zoom: 1; 
}

類再放入<div id="content">，因此它成爲<div id="content" class="cf">

JSFiddle Demo

你可以在這裏看到漂浮物 - 你nder部分「偉大的崩潰」 - http://css-tricks.com/all-about-floats/

來源

2014-02-24 14:15:30

我認爲這裏的問題是#content裏面的所有元素也float：left應用。這樣做的結果是元素本身不會響應元素內部的高度。在這種情況下，min-height和height會做同樣的事情，並且#content的高度不會延長。

除此之外，一切都似乎是工作正如人們所期望您提供的文件內。我可能誤解了你的問題，但我無法添加要求澄清的評論，因爲它告訴我我沒有足夠的分數。

來源

2014-02-24 14:15:58 tommypyatt

爲什麼min-height不起作用？我的HTML代碼

回答

相關問題