html - 另一个 div 内的 div 不具有相同的高度

Question

我在另一个 div 中有一个 div，我想知道为什么内部 div 的高度与其父 div 的高度不同？我把父div的高度设置为40px，但是子div好像没有拉伸(stretch)到这个高度。我对 div 的高度有误吗？

让它变得简单

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

Answer 1

一个 div 只会和它里面的内容一样高(见 this example )。要将子 div 扩展到其父级的高度，请向子级添加 height: 100%。

HTML:

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

CSS:

#first {
    height: 40px;
}

#second {
    height: 100%;;
}

JS Fiddle Example