第二個孩子的div高度填寫父母的高度

Question

我有一個div（文章）有兩個孩子（標題和#content_outer）。標題有一個正確的高度，並且我希望#content_outer有一個高度（沒有給出具體的數字，例如：200px），以便標題高度+ #content_outer高度=文章高度。

這裏是一個小提琴：http://jsfiddle.net/fyNX4/

（在撥弄#content_outer不應超過在底部文章DIV）

我想，解決方案僅僅是使用CSS。

非常感謝。

編輯：

更具體地講，這是我所希望的解決方案：http://jsfiddle.net/fyNX4/5/

我給#content_outer - >高度：240像素;

但是我想給一個％或其他解決方案的高度，如果標題有更多的文本（並有更多的高度），可以適用。 （http://jsfiddle.net/fyNX4/8/）

Answer 1

http://jsfiddle.net/fyNX4/9/

我不得不通過添加一些不必要的標記來修改您的結構：

table: table-row:  table-cell:  cell's content: 
article header   span 
article div#content-row div#content-cell div#content: overflow:auto; 

• table-row s爲必要的，因爲他們是訂購表格單元格的唯一途徑垂直
• table-cell s爲必要的，因爲table-row■不要接受填充或高度。因爲table-cell小號忽略overflow

Answer 2

你想是這樣的：

這裏是更新的小提琴：HTTP：//jsfiddle.net/fyNX4/6/

#main { width: 300px; height:300px; background:Khaki; overflow:auto;} 
#content_outer { background: GoldenRod; height:100%; }