title: Position footer to bottom of window or page, whichever is larger
body: <p>I am currently working on a site that requires a footer to be placed either at the bottom of the window, or the bottom of the page content, whichever is lower. I have tried using the <code>height: 100%</code> method, but this causes a problem.</p>
  
  <p>I also have a <code>position: fixed</code> header, and some padding on my content (defined in pixels). Also, the height of the content may change after the page has loaded (use of accordions, etc.), so I wonder if there's a pure CSS way to position the footer to either the bottom of the window, or the bottom of the document, while still allowing pixel padding and so forth. </p>
  
  <p>Here's an outlined structure of the HTML:</p>
  
  <pre><code>&lt;header&gt;&lt;/header&gt;
  &lt;div class="content"&gt;
      &lt;footer&gt;&lt;/footer&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have also put together a Fiddle to demonstrate how the CSS works at the moment: <a href="http://jsfiddle.net/LY6Zs/" rel="nofollow">http://jsfiddle.net/LY6Zs/</a>. I am unfortunately unable to change the HTML structure (i.e. breaking out the <code>footer</code> element from <code>.content</code>.</p>