Is there a way to make the red area fill the remaining visible space without overlapping into the footer? I also need the infoContent section to be scrollable. The height of the header may vary.
I came across some older solutions that suggested using JavaScript, but are there more modern techniques that can be used in today's browsers?
HTML:
<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>
CSS:
#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; }
Here's a fiddle for experimentation: http://jsfiddle.net/gWmtD/