title: HTML5 + CSS3 100% height with margin
body: <p>Given the following HTML layout:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;body&gt;
      &lt;header class="site-header"&gt;
      &lt;/header&gt;
  
      &lt;section class="site-section"&gt;
      &lt;/section&gt;
  
      &lt;footer class="site-footer"&gt;
      &lt;/footer&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I want to use 100% of the browser height for the header, section and footer. However, there's no problem to achieve that:</p>
  
  <pre><code>html, body { height:100%; }
  
  .site-header  { height:10%; }
  .site-section { height:80%; }
  .site-footer  { height:10%; }
  </code></pre>
  
  <p>My problem is, that this won't work if I want to use a margin for each child of <code>body</code>:</p>
  
  <pre><code>body &gt; * { margin:1%; }
  </code></pre>
  
  <p>No matter if there's a margin or not - the site should always use 100% of the browser height.</p>
  
  <p><strong>EDIT:</strong>
  It seems to more suitable for me to use a white border instead. However, same problem remains. Is it even possible to specify <code>border-width</code> in percent?</p>