html - CSS : Make to sibling divs have the same height, relative to page -

i constraint 1 div take same height sibling div have variable content. additionally, want both divs have min-height of 100% of window's size.

here jsfiddle : http://jsfiddle.net/m5q38/1/

the problem that, use min-height on divs, requires parent container have specified height, can't fix. , if use height: 100% on divs, take height of window, including when content of #container div large div , overflow.

alternatively, if don't use min-height , #container div has less content, div won't take whole window's height :

(here fiddle other try : http://jsfiddle.net/m5q38/3/)

does know how solve ?

to make simple want :

• the green div fit content
• the green div have min height of 100% window
• the blue div have same height of green div.

thanks helping !

if can use jquery, see fiddle , note commented out css

using jquery:

$( function() {     $('#left-bg').height($('#container').height()) }); 

setting consistent div height interesting problem. in past, when i've had multiple sibling div elements wrap them in on div , set each div css display:table-cell , works nicely keep heights equal regardless of div content.

not sure can use here have positioned elements