title: How to stick <footer> element at the bottom of the page (HTML5 and CSS3)?
body: <p>When I use position <strong>relative</strong> with no content, footer goes up, with <strong>absolute</strong> with a lot of content, the footer goes down, and with <strong>fixed</strong> it is always there.</p>
  
  <p>Is there a easy way to get  at the end of the page independently of the content, shrinks and grows with content?</p>
  
  <p>When there is a lot of content we can see the footer in the first page, and when there is few content we will see at the bottom.</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;style type="text/css"&gt;
          html,body {
              padding: 0;
              margin: 0;
          }
  
          header {
              position:fixed;
              top:0;
              width:100%;
              height:40px;
              background-color:#333;
              padding:20px;
          }
  
          footer {
              background-color: #333;
              width: 100%;
              bottom: 0;
              position: relative;
          }
          #main{
              padding-top:100px;
              text-align:center;
          }
    &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;header&gt;
      header
      &lt;/header&gt;
  
      &lt;div id="main"&gt;
      main
      &lt;/div&gt;
  
      &lt;footer&gt;
      footer
      &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>