100% height scrollable div inside of body with a bottom margin of 50px

Question

Can't get this to work. Goal is to create a overflowing scrollable div that stretches the entire width and height of the body. Problem comes once I add a body bottom margin of 50px which I want to reserve to absolutely position a 100% x 50px div control panel. It's essentially a faux iframe with a bottom control panel.

The div seems to ignore that the body margin is not part of the height, so the div's 100% height turns out to be the body height + the top body margin. Is there any way to get the div's height to be only the body height? Seems like to me that, that should be the default behavior or maybe I'm just confused.

I'm currently using a HTML5 doctype FYI.

Answer 1

dont use a margin

something like this

<div id="mainContentArea" style="position:absolute; top:0px; left:0px; bottom:50px; right:0px; overflow:auto">
</div>
<div id="bottomArea" style="position:absolute; bottom:0px; left:0px; right:0px; height:50px; overflow:hidden">
</div>