Second child div height fill parent height

Question

I have a div (article) which has two childs (header and #content_outer). Header has a correct height, and I would like #content_outer to have a height (without giving a specific number for example:200px) so that header height + #content_outer height = article height.

Here is a fiddle: http://jsfiddle.net/fyNX4/

(In the fiddle #content_outer shouldn't exceed article div in the bottom)

I would like that the solution is only with css.

Thank you very much.

EDIT:

To be more specific, this is my desired solution: http://jsfiddle.net/fyNX4/5/

I gave #content_outer --> height:240px;

But I would like to give a height with % or other solution that could apply if the header had more text (and have more height). ( http://jsfiddle.net/fyNX4/8/ )

Answer 1

You want something like this:

Here is the updated fiddle:http://jsfiddle.net/fyNX4/6/

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

Answer 2

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

I had to modify your structure by adding some otherwise unnecessary markup:

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

• table-rows are necessary because they are the only way to order table cells vertically
• table-cells are necessary, because table-rows don't accept padding or height.
• internal wrapper div was necessary because table-cells ignore overflow