title: Sticky Footer at bottom of PAGE, not just bottom of WINDOW
body: <p>I have been searching online for a few days now trying to crack this:</p>
  
  <p>My code approx layout:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="wrapper"&gt;
          &lt;div id="top-header"&gt;&lt;/div&gt;     &lt;!-- This is a fixed position header --&gt;
          &lt;div id="content"&gt;&lt;/div&gt;
          &lt;div id="footer"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I'm trying to make my footer so it works in the following two scenarios:</p>
  
  <p>1) When there is little/no content the footer sits at the bottom of the screen (to avoid ugly/unprofessional-looking gaps)</p>
  
  <p>2) When the content overfills the page (requiring a scrollbar), the footer is at the bottom of the PAGE (ie: is initially hidden until you scroll down).</p>
  
  <p><strong>Unsuccessful FIX #1</strong>
  So far, I have tried using position:fixed, which works in scenario (1) but in scenario (2), the footer is always visible (in its fixed position at the bottom of the window), which I don't want. I only want to be able to see the footer when I scroll to the bottom.</p>
  
  <p><strong>Unsuccessful FIX #2</strong>
  I then found a little more success by absolutely position the footer relative to the 'wrapper' div (which had a min-height:100%). In scenario (1) this worked fine! But when I tried scenario (2), the footer would appear absolutely at the bottom of the "window" but not the bottom of the "page" (or more specifically the 'wrapper' div). When I would then scroll down, the footer would move with the page and cut across the content - very strange! ...... It seems the problem is arising because the height of the 'wrapper' is relative to the window size (height:100%) and this varies in real-time as I change the window size. Is there a way I can state the height of the 'wrapper' div to be 100% of the 'page' rather than 100% of the 'window'? If you think there is a better method or need to see the source code, please let me know... I will happily provide.</p>
  
  <p>I have posted this question because even after following several detailed instructions to fix it, and searching in the archived threads on this site, I have been unsuccessful. Any help would be most appreciated.</p>
  
  <p>JMSSTKS</p>