Вторая дочерняя высота div заполняет родительскую высоту

Question

У меня есть div (статья), которая имеет два дочерних элемента (заголовок и #content_outer). Заголовок имеет правильную высоту, и я бы хотел, чтобы #content_outer имел высоту (без указания определенного числа, например: 200px), чтобы высота заголовка + #content_outer height = высота статьи.

Вот скрипка: http://jsfiddle.net/fyNX4/

(В скрипичной #content_outer не должен превышать статью DIV в нижней части)

Я хотел бы, что решение только с помощью CSS.

спасибо.

EDIT:

Чтобы быть более точным, это мое искомое решение: http://jsfiddle.net/fyNX4/5/

Я дал #content_outer -> высота: 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 s необходим, поскольку они являются единственным способом сделать заказ ячеек таблицы по вертикали
• table-cell s необходим, потому что table-row s не принимает отступы или высоту.
• внутренней обертки DIV необходимо, потому что table-cell s игнорировать overflow

Answer 2

Вы хотите что-то вроде этого:

Вот обновленная скрипка: HTTP: //jsfiddle.net/fyNX4/6/

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