css - 第二个子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 --> height:240px;

但是我想用 % 或其他解决方案给出一个高度，如果标题有更多的文本（并且有更多的高度）。( 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-rows 是必要的，因为它们是垂直排列表格单元格的唯一方法
• table-cells 是必需的，因为table-rows 不接受填充或高度。
• 内部包装 div 是必要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%; }