在另一个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中承认这就是为什么我喜欢最小高度使用。