第二个孩子的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%; }