title: footer not at the very bottom of page when you resize the height of browser window
body: <p>When you resize the browser window height to the point where it enables scrolling, the footer moves from bottom of the page and creates a "gap"</p>
  
  <p>I do not want to use POSITION: FIXED, as it does place the footer on the bottom of the screen, not the page, and later when I add more content it will cover the content below it.</p>
  
  <p>The website uploaded: <a href="http://developerbay.000webhostapp.com/" rel="nofollow noreferrer">http://developerbay.000webhostapp.com/</a></p>
  
  <p>footer css: </p>
  
  <pre><code>.footer {
      background-color: #940a0a;
      height: 55px;
      line-height: 55px;
      width: 100%;
      text-align: center;
      color: #e1dac5;
      font-size: 14px;
      position: absolute;
      bottom: 0;
  }
  </code></pre>
  
  <p>Footer HTML:</p>
  
  <pre><code>&lt;div class="footer"&gt;
          &lt;a&gt;REGISTERED NAMES AND TRADEMARKS ARE THE PROPERTY OF THEIR RESPECTIVE OWNERS - Copyright © 2017 All rights reserved&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>