Positioning multiple sections with independent overflows in HTML
<p>I'm constructing a page that contains multiple different sections that all change contents dynamically, but I want them to be a fixed size and show a scroll bar (for only that section) if there is an overflow.
In practice I have three primary sections (div); two which should satisfy the fixed size and overflow properties, and one that acts as a footer and should be fixed to the bottom of the screen and never change size.</p>

<p>My problem is that I can't seem to figure out how to order and position these sections without them overlapping each other or the overflow not working as intended. 
Basically I want the footer to just occupy the space it needs but always be bounded to the bottom of the screen. The other two sections should then occupy 50% of the rest of the page each. There should never be a need for a scroll bar to the page itself - but rather one for each of the two sections, since their contents vary and can overflow.</p>

<p>I have tried many different solutions, but here is a simplified example on what I have been working with:</p>

<p><a href="http://i.stack.imgur.com/RSAxK.png" rel="nofollow">Very quick mock up</a></p>

<pre><code>&lt;div id="page" style="position:relative; margin-top:45px"&gt;
    &lt;div id="wrapper" style="height:100%; margin-bottom:3.5em"&gt;
        &lt;div id="block-a" style="height:50%; overflow: auto; padding:0; position:relative"&gt;
            &lt;h2&gt;...&lt;/h2&gt;
            &lt;br/&gt;
            &lt;div id="dynamicGrid"&gt;&lt;/div&gt;
            &lt;br/&gt;
            &lt;button&gt;...&lt;/button&gt;
        &lt;/div&gt;
        &lt;div id="block-b" style="height:50%; padding:0; position:relative"&gt; 
            &lt;div style="padding-bottom:0"&gt;
                &lt;ul id="listHeader"&gt;
                    &lt;li id="header"&gt;...&lt;/li&gt;
                    &lt;li  id="addNew"&gt;
                        &lt;a&gt;...&lt;/a&gt;
                    &lt;/li&gt;
                &lt;/ul&gt;
            &lt;/div&gt;
            &lt;div id="listSection" style="overflow: auto"&gt; 
                &lt;ul id="list"&gt;&lt;/ul&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="footer" style="position:fixed; left:0; right:0; bottom:0"&gt;
        &lt;ul&gt; 
            &lt;li&gt;
                &lt;label&gt;...&lt;/label&gt;
                &lt;label&gt;...&lt;/label&gt;
                &lt;label&gt;...&lt;/label&gt;
            &lt;/li&gt;
        &lt;/ul&gt;  
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The 'page' div is positioned relative to the body with also contains the header (45 px from top). The list with id 'list' is the list that gains list elements dynamically, and the div 'dynamicGrid' contains a bunch of selects, inputs and labels.
The div 'listSection' is what I want to overflow independently and this is the case for 'block a' as well.</p>

<p>A big problem I keep encountering is that I can't seem to define the space left after the footer has been created. In theory I want something like height:100%-sizeOf(footer)...</p>

<p>An important rule as well, is that this page has to work in most major browsers, and has to 'work' on different screen sizes (I want to avoid using px too much, but rather %)</p>

<p>For now I use inline html styling, but an answer using CSS is also fine.
I use JavaScript and Jquery to control the page, but the layout should be set using html.</p>