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 中并不总是被识别，这就是我喜欢使用最小高度的原因。