在另一個div內的div不具有相同的高度

Question

我有一個div在另一個div內，我不知道爲什麼內部div的高度與其父不一樣？我將父div的高度設置爲40px，但子div似乎不能伸展到這個高度。我對div的高度錯了嗎？

製作簡單

<div id="first" style="height:40px"><div id="second"></div></div> 

Answer 1

因爲其中的內容（見this example）一個div只會爲高。要將子div擴展到其父級的高度，請將height: 100%添加到子級。

HTML：

<div id="first"> 
    <div id="second"></div> 
</div> 

CSS：

#first { 
    height: 40px; 
} 

#second { 
    height: 100%;; 
} 

JS Fiddle Example

Answer 2

如果你想確保兒童div元素是相同的高度，你應該父元素使用最小高度。

<style type="text/css"> 
div.main 
{ 
    width:auto; 
    height:500px; 
} 

div.content 
{ 
    width: 100%; 
    min-height:90%; 
    border:2px solid FF0000; 
} 

</style> 

體內

<div class="main"> 
<div class="content"> 
<stuff here> 
</div> 
</div> 

單獨的屬性高度

並不總是在IE中承認這就是爲什麼我喜歡最小高度使用。