title: CSS: Make footer always at bottom of page even on scroll
body: <p>So I've come across this issue with my footer. Basically, I managed to make it so that the footer always appears at the bottom of the web page...when the content of the site doesn't reach it. However, when the content reaches the footer you obviously need to scroll down. But, when scrolling the footer stays were it is. This is with a position of absolute.</p>
  
  <p>So, I changed the position to fixed to have a look at it that way. The footer so always stay at the bottom of the page but when you it stays there even on scroll.</p>
  
  <p>What I need is for the footer to ALWAYS be at the bottom of the content UNLESS the content is not enough to fill the user's screen in which case the footer moves to the bottom of the screen. My CSS for the footer is below. Any ideas?</p>
  
  <pre><code>footer{
      position: fixed;
      height: 40px;
      background-color: #F1F0EE;
      color: #999;
      bottom: 0;
      width: 100%;
      padding-top: 10px;
      text-align: center;
  }
  </code></pre>
  
  <p>Many thanks in advance.</p>