有可变大小的标题时，如何使div填充剩余高度？

Question

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:

<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 to play around with: http://jsfiddle.net/gWmtD/

Answer 1

Using a table was the first thing that came to mind: http://jsfiddle.net/gWmtD/9/

I used inline CSS because it was easier for me to prototype with and you can easily see the changes I've made.

<div id="page">
    <aside id="infoBar" style="overflow-y: auto;">
        <table style="height:100%; width:100%;">
            <tr>
                <td>
                    <header>
                        Variable Sized Header
                    </header>
                </td>
            </tr>
            <tr>
                <td style="height:100%; width:100%;">
                    <div id="infoContent">
                        <div>First Content Item</div>
                        <div>Second Content Item</div>
                        <div>Third Content Item</div>
                    </div>
                </td>
            </tr>
        </table>
    </aside>
    <footer id="footer">Footer</footer>
</div>

Edit: To enable the scrollbar for the aside when you scrunch the page down in FireFox, add the following property:

overflow-y: auto;

Which will make the y scrollbar appear only when it's needed. This happens by default in Chrome, and can be turned off in Chrome by setting:

overflow-y: none;

Answer 2

A quick google search reveals the overflow method for the scroll bar: http://www.w3schools.com/cssref/pr_pos_overflow.asp

You should look into css wrapper classes for your other problem as a start.