css - css - マージン上部により、不要なボディ スクロール バーが発生する

Question

上から 30px を押し下げるようhtml, body {height:100%;}に、相対的なマージンまたは位置を追加しながら維持する必要がある状況があります。 問題は、これを行うとスクロールバーが右側に表示されることです。 の高さが変わるため、高さを上げるとスクロールバーが表示される場合があります。.content

.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;}