Make the inner div grow tall when the outer div grows

Question

I have two divs inside the parent div (see image below). When the “black” div grows in height, so does the outer “red” div, but I want to also increase the “green” div. How can this be done in css?

Answer 1

You can use CSS properties table, table-row, and table-cell. You may need to check to see if it supports your targeting in browsers. http://www.quirksmode.org/css/display.html#table

Example: http://jsfiddle.net/2GawC/

Answer 2

height:100% , , , div position static ( ). position:relative , .:)