拉伸格於母公司的高度

我希望我的內容區域伸展到父的高度，我對標題區域的固定高度。我無法對內容區域的高度進行硬編碼，因爲在我工作的情況下，父區域的高度可能會發生變化。拉伸格於母公司的高度

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

拉伸格於母公司的高度

回答

相關問題