title: CSS sticky footer - problems with content styling
body: <p>I'm trying to implement a sticky footer with CSS. I realize that this is a common problem and so I tried the various solutions found via Google.</p>
  
  <p>However, none of the solutions I found accomplished quite what I'm trying to do. I not only want the footer to be at the bottom, but also that I can put a <code>div</code> between the header and the footer which takes up all the available space, even when there is not enough content (Imagine if you put a border around <code>#content</code>, it should expand from the header all the way down to footer, no matter how much content there is.).</p>
  
  <p>This is where the solutions fail. Either a "push" element gets in the way. Or, there is no way to set that <code>div</code> to 100% without destroying the footer or increasing the page width beyond 100%.</p>
  
  <p>Here's the basic markup:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;body&gt;
          &lt;header&gt;
              Header!
          &lt;/header&gt;
          &lt;div id="content"&gt;
              Content!
          &lt;/div&gt;
          &lt;footer&gt;
              Footer!
          &lt;/footer&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Once again, I have run out of ideas to make CSS do what I want it to do. I may not use Javascript. Help?</p>
  
  <p>EDIT: I would prefer the header to have a dynamic height. The footer should not be visible at all times. It should work like <a href="http://www.cssstickyfooter.com" rel="nofollow">this</a>.</p>
  
  <p>EDIT 2: It should look kind of like <a href="http://jsfiddle.net/awTZS/" rel="nofollow">this</a>, except that the black area should extend all the way to the footer.</p>