2

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

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/

4

2 回答 2

3

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

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

(This is not a real <tr>, it is a sematic div but it is just emulating the behavior of a <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/

EDIT:

As Dipaks rightly points out, IE7 doesn't support the display: table-row; property.

于 2012-09-10T07:27:22.900 回答
1

Maybe you can use the property of a table. Set your parent as a table You can have a fixed height for your title, that you display as a table-row. And your content is the second and last table-row; so it always fit the height of the table.

Here is a fidde example : http://jsfiddle.net/PGJJv/5/

You just have to play with margin and border to recreate exactly your template.

于 2012-09-10T07:27:54.200 回答