title: How to stick footer to bottom (not fixed) even with scrolling
body: <p>I want the footer of this page to stick to the bottom, below all content, but not fixed in the screen. The problem is that when the body has more than 100% of height, the footer stay in the middle of the screen, and not in the bottom.</p>
  <p>I've seen a lot of tutorials on how to achieve this, using &quot;position: absolute&quot; + &quot;bottom: 0&quot; and stuff, but everything failed.</p>
  <p>Check it out:</p>
  <pre class="lang-html prettyprint-override"><code>&lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset=&quot;iso-8859-1&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;index.css&quot; /&gt;
    &lt;link href='https://fonts.googleapis.com/css?family=Arvo|Open+Sans|Ubuntu+Roboto' rel='stylesheet' type='text/css'&gt;
    &lt;title&gt;Matheus's Page&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id=&quot;wrapper&quot;&gt;
      &lt;header&gt;
        &lt;div class=&quot;title-div&quot;&gt;
          &lt;h1&gt;Title&lt;/h1&gt;
        &lt;/div&gt;
  
        &lt;nav&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;h3&gt;Home&lt;/h3&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;h3&gt;Articles&lt;/h3&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;h3&gt;Perfil&lt;/h3&gt;
            &lt;/li&gt;
            &lt;li&gt;
              &lt;h3&gt;Settings&lt;/h3&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
        &lt;/nav&gt;
      &lt;/header&gt;
      &lt;div id=&quot;body&quot;&gt;
        &lt;p&gt;Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste Texto teste &lt;/p&gt;
      &lt;/div&gt;
      &lt;footer&gt;
        &lt;p&gt;Footer&lt;/p&gt;
      &lt;/footer&gt;
      &lt;div&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  <p>CSS:</p>
  <pre class="lang-css prettyprint-override"><code>body {
    font-family: 'Arvo', serif;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  
  #wrapper {
    min-height: 100%;
  }
  
  header {
    position: absolute;
    float: top;
    width: 100%;
    height: 8%;
    background-color: #424242;
    color: #FFD740;
  }
  
  .title-div {
    position: absolute;
    height: 100%;
    margin: auto 5%;
    padding-right: 3%;
    border-right: solid 2px #FFD740;
  }
  
  header nav {
    position: absolute;
    width: 75%;
    left: 15%;
  }
  
  header ul {
    list-style: none outside none;
  }
  
  header ul li {
    display: inline-block;
    margin: auto 2% auto 0;
  }
  
  #body {
    padding: 10px;
    padding-top: 8%;
    padding-bottom: 15%; /* Height of the footer */
  }
  
  footer {
    position: absolute;
    width: 100%;
    height: 15%;
    right: 0;
    bottom: 0;
    left: 0;
    color: #FFD740;
    background-color: #424242;
    clear: both;
  }
  </code></pre>
  <p>Link to printscreen of the result:</p>
  <p><img src="https://i.stack.imgur.com/s2LhG.png" alt="link to printscreen of the result" /></p>