title: placed a footer bottom with CSS
body: <p>I want place my footer on bottom screen like position: fixed and bottom 0 if there is not enough content. But when there is more content I want the footer after the content and not fixed at bottom.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="header"&gt;Header&lt;/div&gt;
  &lt;div id="content"&gt;
      Bla
  &lt;/div&gt;
  &lt;div id="footer"&gt;sdfasdf&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#header { background-color: gray; padding: 10px;}
  #footer { background-color: black; padding: 10px;  color:white;}
  </code></pre>
  
  <p><a href="http://jsfiddle.net/FJWZu/" rel="nofollow">http://jsfiddle.net/FJWZu/</a> </p>
  
  <p>In this case you see in the jsfiddle I want the footer at bottom.</p>
  
  <p>Is there a way to achieve this without JS?</p>