css - margin top causes unwanted body scroll bar

Question

I have a situation where i need to keep html, body {height:100%;} while adding margin or position relative to the .content so that it pushes down 30px from top.
The problem is that doing this causes scrollbars to appear on the right.
The height of .content will change so there might be scrollbars if the height is increased.

How can i fix this so that i get rid of the side scrollbars when .content does not have increased height without forcing overflow-y: hidden;?

heres my fiddle http://jsfiddle.net/nalagg/5bwBx/

html:

<div id='container'>
    <div class='header'></div>
    <div class='content'></div>
    <div class='footer'></div>
</div>

css:

html, body {height:100%;}
#container{height:100%; width:400px; margin:0 auto; background-color:grey;}
    .header{ height:20px; width:400px; background-color:red;}
    .content{ height:200px; width:400px;  position:relative; top:30px; background-color:blue; }
    .footer{ height:20px; width:400px; background-color:green;}

Answer 1

One simple solution, margin:0; and padding:0; on the body.
The reason of this, is to reset all the defauls set on the margins and paddings.

html, body {height:100%; margin:0; padding:0;}

DEMO

Answer 2

Actually, it has nothing to do with that. The scrollbar is being added because of the default margin on the body. By default the body is set to margin:8px - in Chrome anyways.

Simply set body { margin:0px; } to remove it.

jsFiddle here - the vertical scrollbar is removed.