css - 第二个 child div高度填充父高度

Question

我有一个 div(文章)，它有两个 child (header 和#content_outer)。页眉有一个正确的高度，我希望#content_outer 有一个高度(没有给出具体数字，例如:200 像素)，这样页眉高度 + #content_outer 高度 = 文章高度。

这是一个 fiddle :http://jsfiddle.net/fyNX4/

(在 fiddle 中 #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-row 是必需的，因为它们是垂直排列表格单元格的唯一方式
• table-cell 是必需的，因为 table-row 不接受填充或高度。
• 内部包装 div 是必要的，因为 table-cell 忽略 overflow