Middle div content not overflowing when header is dynamic - html

Question

I have 3 vertically aligned div (header, content, footer)
<div id="container">
<div id="header"> </div>
<div id="content"> </div>
<div id="footer"> </div>
</div>
Like this:
Just like in this example: http://jsfiddle.net/jS6pa/2/
(Example from here: http://peterned.home.xs4all.nl/examples/csslayout1.html)
As you can see in the jsfiddle example, I'm unable to complete all the requirements. The footer div doesnt collapse the content when I resize the window. If I make some tweeks I can achieve this but then the overflow:scroll doestn work and the scrollbar is not displayed
Here is another way I tried to solve this ( with no succes :S ) : http://jsfiddle.net/rv4XS/31/
I dont know if one way or another is the best approach to solve this. Just check the first or the second jsfiddle to see which one is the best
How can I achieve a full height content in a scenario where the header has dynamic content and at the same time, show a scrollbar when the content is overflow?
Thanks in advance for any help.

Answer 1

Ok I finally achieve this, using javascript.
The idea is simple. The height of the header has to be setted, no matter what.
For this I dont know why (maybe because this div was called in ajax) but the jquery .height() method didnt worked for me, but using the clientHeight method worked for me well.
var header = document.getElementById('headerDiv');
if(header)
{
$('contentDiv').css('top', header.clientHeight);
}