css - margin top会导致不必要的正文滚动条

Question

我有一种情况,我需要保持html, body {height:100%;}相对于增加边距或位置,.content以便它从顶部推下30px.
问题是,这样做会导致滚动条出现在右侧.
高度.content将改变,因此如果高度增加可能会有滚动条.

我怎么能解决这个问题,以便在.content没有强制增加高度的情况下摆脱侧面滚动条overflow-y: hidden;？

继承我的小提琴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

一种简单的解决方案，margin:0;并且padding:0;在身体上。
这样做的原因是重置所有在边距和填充上设置的默认值。

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

演示版