title: How to have a content div span the remainder height of a page without scroll?
body: <p>I'm trying to create a page that takes 100% of the height of the page, without displaying a scroll bar. However, I wanted to add a header above this, and when I do, a scroll bar appears due to extra height. I've tried compensating with a negative bottom margin to compensate for the extra length, but this doesn't seem to change the length. How can I prevent a scroll bar from appearing with this layout?</p>
  
  <p>Here is the code I have:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;style type="text/css"&gt;
    * { 
      margin: 0;
      padding: 0;
    }
    body {
      background-color: orange;
    }
    div#header {
      background-color: red;
      height: 50px;
    }
    div#content {
      background-color: yellow;
      height: 100%;
      margin-bottom: -50px;
    }
    &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="header"&gt;
      HEADER
    &lt;/div&gt;
    &lt;div id="content"&gt;
      Test Content
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Edit: I did try a margin-top: -50px with a padding-top: 50px on the content div before. However it doesn't behave as I expected, as the content will overlap the header even if I set a z-index.</p>