title: HTML5/CSS Full Height Layout
body: <p>Ok, this is my basic website structure:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="wrapper"&gt;
          &lt;header&gt;&lt;a href="/"&gt; &lt;/a&gt;&lt;/header&gt;
          &lt;nav&gt;
              &lt;ul&gt;
                  &lt;li&gt;&lt;a href="..."&gt;...&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="..."&gt;...&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="..."&gt;...&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/nav&gt;
          &lt;div id="content"&gt;&lt;/div&gt;
          &lt;footer&gt;&lt;a href="/"&gt; &lt;/a&gt;&lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And here is my CSS basics:</p>
  
  <pre><code>html
  {
      font-size: 100%;
      height: 100%;
      line-height: 1.4;
      overflow-y: scroll;
  }
  
  body
  {
      background: #EEE url("../images/background.png") repeat-y center center fixed;
      color: #333;
      height: 100%;
      font: 1em 'Lato-Regular';
      margin: 0;
      padding: 0;
  }
  
  #wrapper
  {
      height: 100%;
      margin: 0 auto;
      width: 960px;
  }
  
  #content
  {
      min-height: 460px;
      height: auto !important;
      height: 460px;
      margin: 20px 0;
  }
  </code></pre>
  
  <p>This is what I would like to achieve (without using javascript hacks, preferably):</p>
  
  <ol>
  <li>Header and footer height are determined by their content size.</li>
  <li><code>div#content</code> should have a minimum height of X pixels, but otherwise expand as much as it wants to include the content of the page.</li>
  <li><code>div#wrapper</code> should stretch to fill the whole viewport height with the <code>div#content</code> being the flexible part that stretch to fill.</li>
  <li>I'm trying to target as many browsers as possible but I'm not really into full cross-browser compatibility. Let's old browsers die.</li>
  </ol>
  
  <p>I'm getting a weird result:</p>
  
  <p><a href="https://i.stack.imgur.com/4tTPl.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4tTPl.png" alt="enter image description here"></a></p>
  
  <p>As you can see, the wrapper is not stretching to fill the browser viewport and, by consequence, the footer (the black bar on the bottom) is floating in the middle of the page.
  Can you help me please?</p>