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;，将子级设置为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;属性。

Answer 2

也许你可以使用表的属性。将您的父级设为table 您可以为标题设置固定高度，并将其显示为table-row。而你的内容是第二行和最后一行;所以它总是适合桌子的高度。

这是一个fidde示例：http://jsfiddle.net/PGJJv/5/

您只需要使用边距和边框来重新创建您的模板。

将div拉伸到父亲的身高

2 个答案: