title: Footer sticky at bottom, content-wrapper fill free space
body: <p>I'm working on a web layout:</p>
  
  <ol>
  <li>header and footer should be full-width, content narrow and centered</li>
  <li>footer at the bottom of the screen or at the bottom of the page, depending on content length</li>
  <li>if the content does not fill the complete screen, its wrapper should fill the screen anyway</li>
  </ol>
  
  <p><img src="https://i.stack.imgur.com/BRb1n.png" alt="Layout as described above"></p>
  
  <p>The first two points are no problem, but by now I can stretch the body only using Javascript. CSS <code>min-height: 100%</code> does not work, is there a possibility to fix this in pure CSS?</p>
  
  <p>Here's <a href="http://jsfiddle.net/AJ9hr/5/" rel="nofollow noreferrer">a Fiddle</a> of the scenario including a quick-and-dirty jQuery solution.</p>