How do I make a div fill remaining height when there's a variable sized header?

[diustyday]

Any way to get the red area to fill the rest of the viewable area but not extend into the footer like it is now? I also need the infoContent part to be scrollable. The height of the header portion is variable.I found a bunch of couple year old answers which said to use JavaScript, but are there any techniques that can be used in modern browsers to avoid that?HTML:\[code\]<div id="page"><aside id="infoBar"> <header>Variable Sized Header</header> <div id="infoContent"> <div>First Content Item</div> <div>Second Content Item</div> <div>Third Content Item</div> </div> </aside> <footer id="footer">Footer</footer></div>\[/code\]CSS:\[code\]#footer { position:fixed; bottom: 0; height: 50px; background-color: rgba(0, 0, 255, 0.5); width: 100%;}#infoBar { position: fixed; right:0; top: 0; bottom: 50px; padding: 5px; border: 1px solid black; width: 200px; }#infoBar > header { height: 50px; }#infoContent { height: 100%; background-color: red; overflow-y: auto; }#infoContent > div { margin: 5px; height: 50px; background-color: yellow; }\[/code\]Here's a fiddle to play around with: http://jsfiddle.net/gWmtD/