title: css - margin top causes unwanted body scroll bar
body: <p>I have a situation where i need to keep <code>html, body {height:100%;}</code> while adding margin or position relative to the <code>.content</code> so that it pushes down 30px from top.<br />
  The problem is that doing this causes scrollbars to appear on the right.<br />
  The height of <code>.content</code> will change so there might be scrollbars if the height is increased.</p>
  
  <p>How can i fix this so that i get rid of the side scrollbars when <code>.content</code> does not have increased height without forcing <code>overflow-y: hidden;</code>?</p>
  
  <p>heres my fiddle <a href="http://jsfiddle.net/nalagg/5bwBx/" rel="noreferrer">http://jsfiddle.net/nalagg/5bwBx/</a></p>
  
  <p>html:</p>
  
  <pre><code>&lt;div id='container'&gt;
      &lt;div class='header'&gt;&lt;/div&gt;
      &lt;div class='content'&gt;&lt;/div&gt;
      &lt;div class='footer'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>css:</p>
  
  <pre class="lang-css prettyprint-override"><code>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;}
  </code></pre>