Partially hidden content on scrollable divs - css

Question

I've been searching for similar questions to these, but I couldn't find one, so I'm exposing my problem, hoping you could tell me what am I doing wrong and how to correct it.
I'm trying the accomplish the following scenario: two divs, side by side, using 100% of height and width, in which the left one can be scrollable. The right one has a few divs on top of each other, and the last one should have its contents scrollable too.
A picture can better describe the scenario:
The blue divs are the ones that can be scrollable, but the height of red ones is unknown.
I was able to partially accomplish this, but the problem is that the content of the last div is pulled down from the view in the same proportion as the height sum of the red divs, so when the user scrolls that blue div he won't be able to view the full content of it.
What can I do to solve this?
I also got a fiddle where this behavior can be reproduced: http://jsfiddle.net/d3dNG/3/
Thanks for any feedback on this.
HTML:
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="right">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS:
html, body {
margin: 0;
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
background: pink;
}
#left {
float: left;
width: 100px;
height: 100%;
overflow-y: auto;
background: gold;
}
#right {
height: 100%;
width: 100%;
}
#rightContent {
height: 100%;
overflow-y: auto;
background: lime;
}

Answer 1

Since you will not know what the size of #header1 you can go about this by using javascript or jQuery.
(Make sure to only use ids once on your page since they are unique, #header1 is used 3 times)
The html I changed:
<div class="headParent">
<div class="header1">Header 1</div>
<div class="header1">Header 2</div>
<div class="header1">Header 3</div>
</div>
The little jQuery I wrote:
function rightSize() {
var hH = $('.headParent').height(), // grabs the `#header1`'s parents height
mH = $('#rightContent').height() - hH; // minus the height from the `#rightContent`
$('#rightContent').css({height: mH});
}
rightSize();
Finally, a fiddle: Demo
Even once there is more of the .header1 the #rightContent will still adapt correctly to fit the content.

Answer 2

Try this:
HTML
<div class="container">
<div id="left">
Left (first)<br />
[...]Left<br />
Left (last)<br />
</div>
<div id="rightOne">
<div id="header1">Header 1</div>
<div id="header1">Header 2</div>
<div id="header1">Header 3</div>
</div>
<div id="rightTwo">
<div id="rightContent">
Right (first)<br />
Right<br />
[...]
Right (last)<br />
</div>
</div>
</div>
CSS
#rightOne {
height: 16%;
width: 100%;
}
#rightTwo {
height: 84%;
width: 100%;
}
I've updated your fiddle: http://jsfiddle.net/d3dNG/4/