Scroll in div with a 100% height

To summarize, I'm trying to get a "resizable page" both in the height and in the width of the wi开发者_运维技巧ndow. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).

As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).

Is there a way to make it javascript free?

The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:

red part: 10% of the total height blue+yellow (i.e. the "wrapper" div): 90% height

This would mean the "container" wrapper should nicely fill up those 90%.

Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.