title: Dividing HTML page into horizontal sections, without vertical scrollbars
body: <p>I'm trying to create something like this:</p>
  
  <p><a href="http://jsfiddle.net/S6FUQ/" rel="noreferrer">http://jsfiddle.net/S6FUQ/</a></p>
  
  <p>HTML is:</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;main&gt;
          &lt;section class="half"&gt;&lt;/section&gt;
          &lt;section class="half"&gt;&lt;/section&gt;
      &lt;/main&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And CSS is:</p>
  
  <pre><code>* {
      margin: 0; padding: 0;
  }
  html, body, #container {
      height: 100%;
  }
  header {
      height: 50px;
      background: gray;
  }
  main {
      height: 100%;
      background: green;
  }
  .half {
      height: 50%;
  }
  .half:first-child {
      background: blue;
  }
  .half:last-child {
      background: yellow;
  }
  </code></pre>
  
  <p>In it, I have a thin ribbon at the top, and I want to divide the rest of the screen into two equal sections, but I don't want vertical scrollbar to appear.</p>
  
  <p>I tried <code>margin-bottom: 50px;</code> for <code>main</code>, but it didn't work. What should I do?</p>