title: Fixed header & footer with scrollable content
body: <p>I set my header and footer to position:fixed. But in case of scrollable content the text goes to the header/footer area: Here's my complete code: <a href="http://jsfiddle.net/kaqz1km2/6/" rel="nofollow">http://jsfiddle.net/kaqz1km2/6/</a></p>
  
  <p>In this case I don't want to use background-image or background-color.</p>
  
  <p>And here's the CSS:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body { height:100%; }
  header { position:fixed; width:100%; top:0; margin-top:1rem; }
  footer { position:fixed; width:100%; bottom:0; line-height:3rem; }</code></pre>
  </div>
  </div>
  </p>