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

It can not be found to work, the goal is to create an Overflow Scroll Divis which is the full width and height of the body Enhances. Once I add the bottom margins of a body of 50px, then I want to reserve a 100% x 50px for the control panel of the control panel. This is basically an incorrect iframe with the lower control panel.

The devil seems to ignore that the margins of the body are not part of the height, so 100% height of the div goes to the height of the body + body margin. Is the height of the body only the height of the body? The way? I think, this should be the default behavior or maybe I'm just confused.

I am currently using an HTML5 doctype FYI.

  & lt; Div id = "mainContentArea" style =    "position: full; top: 0 pixel; left: 0 pix; bottom: 50 pixel; right: 0 pixel; overflow: auto" Gt; & Lt; / Div & gt; & Lt; Div id = "bottomArea" style = "position: full; bottom: 0px; left: 0px; right: 0px; height: 50px; overflow: hidden" & gt; & Lt; / Div & gt;