title: Footer at bottom of page or content, whichever is lower
body: <p>I have the following structure:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="main-wrapper"&gt;
          &lt;header&gt;
          &lt;/header&gt;
          &lt;nav&gt;
          &lt;/nav&gt;
          &lt;article&gt;
          &lt;/article&gt;
          &lt;footer&gt;
          &lt;/footer&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I dynamically load content in the <code>&lt;article&gt;</code> using javascript. Because of this, the height of the <code>&lt;article&gt;</code> block can change.</p>
  
  <p>I want the <code>&lt;footer&gt;</code> block to be at the bottom of the page when there is a lot of content, or at the bottom of the browser window when only a few lines of content exist.</p>
  
  <p>At the moment I can do one or the other... but not both. </p>
  
  <p>So does anyone know how I can do this - get the <code>&lt;footer&gt;</code> to stick to the bottom of the page/content or the bottom of the screen, depending on which is lower. </p>