Question

我在另一个div中有一个div，我想知道为什么内部div的高度与其父级不同？我将父div的高度设置为40px，但是子div似乎没有伸展到这个高度。我对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

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的原因。

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

2 个答案: