title: Preventing fixed footer from overlapping content
body: <p>I've fixed my footer DIV to the bottom of the viewport as follows:</p>
  
  <pre><code>#Footer
  {
      position: fixed;
      bottom: 0;
  }
  </code></pre>
  
  <p>This works well if there isn't much content on the page. However, if the content fills the full height of the page (i.e. the vertical scroll bar is visible) the footer overlaps the content, which I don't wont.</p>
  
  <p>How can I get the footer to stick to the bottom of the viewport, but never overlap the content?</p>