html - 別のdiv内のDivの高さが同じではありません

Question

別のdiv内にdivがあり、内側のdivの高さが親と同じでないのはなぜですか？親divの高さを40pxに設定しましたが、子divがこの高さまで伸びていないようです。divの高さについて間違っていますか？

シンプルにする

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

Answer 1

divの高さは、その中のコンテンツと同じだけになります（この例を参照）。子divをその親の高さまで拡張するには、height: 100%子に追加します。

HTML：

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

CSS：

#first {
    height: 40px;
}

#second {
    height: 100%;;
}

JSフィドルの例

Answer 2

子のdiv要素が親の要素と同じ高さであることを確認する場合は、min-heightを使用する必要があります。

<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では、属性の高さだけが常に認識されるとは限らないため、min-heightを使用するのが好きです。