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

Question

I would like to constraint one div to take the same height as a sibling div that would have variable content. Additionally, i want both divs to have a min-height of 100% of the window's size.
Here is the JSFiddle : http://jsfiddle.net/m5q38/1/
The problem is that, i would like to use min-height on the divs, but this requires the parent container to have a specified height, which i can't fix. And if i use height: 100% on my divs, they will take the height of the window, including when the content of the #container div is too large for this div and would overflow.
Alternatively, if i don't use min-height and the #container div has less content, the div won't take the whole window's height :
(Here is the fiddle for this other try : http://jsfiddle.net/m5q38/3/)
Does anyone know how to solve this ?
To make simple i want :
The Green Div to fit its content
The Green Div to have a min height of 100% the window
The Blue Div to have the same height of the green div.
Thanks for helping !

Answer 1

if you can use jquery, see this FIDDLE and note the commented out CSS
using jquery:
$( function() {
$('#left-bg').height($('#container').height())
});
Setting a consistent div height is always an interesting problem. In the past, when I've had multiple sibling div elements I generally just wrap them in on div and set each div css to display:table-cell and that works nicely to keep heights equal regardless of div content.
Not sure you can use that here as you have positioned elements

Answer 2

This can only be done with Javascript, it's a pretty common problem, and there are numerous (javascript) solutions, depending on whether you've got a generalized, site-wide dilemma or just a pair of elements that need a tweak.
If you are using jquery, this will give you a basic solution that you can complicate to your needs:
/* note: add both ready and resize here, via "on", that way they'll
be bound to any selectors (not just id) in place of "#element1"
(such as ".left-column"), including those that arrive via an ajax call
(ie. aren't present when the call is made) */
$(window).on(["ready","resize"], function() {
var heights = [$("#element1").innerHeight(),$("#element2").innerHeight()]
var tall_then_short = [heights[0] > heights[1] ? heights : [heights[1], heights[0]];
$("#" + tall_then_short[0]).css("min-height", "#" + tall_then_short[1]);
});
But a far nicer way is to use a library with this feature as it'll tend to be more robust; personally I use Foundation 5's Equalizer feature.