拉伸格于母公司的高度

我希望我的内容区域伸展到父的高度，我对标题区域的固定高度。我无法对内容区域的高度进行硬编码，因为在我工作的情况下，父区域的高度可能会发生变化。拉伸格于母公司的高度

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/

来源

2012-09-10 janith

有一种方法可以做到这一点，而无需使用固定的高度：

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

（这是不是一个真正的<tr>，它是一个思迈特格但它仅仅是仿效<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;财产。

来源

2012-09-10 07:27:22 Kyle

正是我想要的！谢谢 – janith

表格在IE7上失败 – Dipak

不客气。 @Dipaks：我知道，但OP没有指定浏览器支持。已添加到我的答案额外的信息。 – Kyle

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

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

你只要有边距和边框发挥正是重新创建模板。

来源

2012-09-10 07:27:54 audre7

拉伸格于母公司的高度

回答

相关问题