html - 将 div 拉伸(stretch)到父级的高度

Question

我希望我的内容区域延伸到父级的高度，并且标题区域的高度是固定的。我无法对内容区域的高度进行硬编码，因为在我正在处理的情况下，父区域的高度可能会发生变化。

HTML:

​<div class="parent">
    <div class="title">Title</div>
    <div class="content">
       <p>My Content</p>
    </div>
</div>​

CSS:

.parent{
    width : 500px;
    height: 300px;
    background-color : gray;
    position: absolute;
}

.title{
    height:50px;
    background-color: #94A6E0;
    margin:5px;
}

.content{
    background-color: #8CBF99;
    margin:5px;
}

JSFiddle:http://jsfiddle.net/PGJJv/

Answer 1

有一种方法可以在不使用固定高度的情况下做到这一点:

您可以将父级设置为 display: table;和 children display: table-row 。然后最低的 div 将占据其余的高度。唯一的问题是，您需要在两者之间添加一个额外的元素来将两个元素之间的空间伪造为 border-top或border-bottom don't继续工作<tr> s。此外，您还必须向父级添加内边距，以代替子级的边距。

(这不是真正的 <tr> ，它是一个语义 div，但它只是模拟 <tr> 的行为。)

HTML:

<div class="parent">
    <div class="title">Title</div>
    <span class="greyLine"></span>
    <div class="content">
        <p>My Content</p>
    </div>
</div>​

CSS:

.parent{
    width : 500px;
    height: 300px;
    background-color : gray;
    position: absolute;
    display: table;
    padding: 5px;
}

.title{
    height:50px;
    background-color: #94A6E0;
    display: table-row;
}

span.greyLine
{
    display: table-row;
    background-color: gray;
    height: 5px;
}

.content{
    background-color: #8CBF99;
    display: table-row;
}​

http://jsfiddle.net/Kyle_/PGJJv/6/

编辑:

正如 Dipaks 正确指出的那样，IE7 不支持 display: table-row;属性。