Footer will not stay down

Question

I have tried SO MANY DIFFERENT THINGS and I cannot get my footer to stay at the bottom.

Using Opencart makes it a little more difficult for me to find where the issue is but I JUST CANNOT FIGURE OUT WHY.

The link below shows where the issue is replicated. However, when there is minimal content on ANY page, the issue appears. So technically, since the footer shows on all pages (as a common file) it's a persistent problem.

http://shop.enigmedesigns.com/index.php?route=product/category&path=17

I'm at the end of my rope. Could someone take a look through the code and see any potential issues? Solutions? Why won't my footer just stay down?

edit: Footer code...

<div id="footerwrapper">
    <div id="footer">
      <div id="links">
        <ul>
         <li><?php echo $text_copyright; ?></li>
         <li><a href="<?php echo $home; ?>"><?php echo $text_home; ?></a></li>
         <li><a href="<?php echo $about; ?>"><?php echo $text_about; ?></a></li>
         <li><a href="<?php echo $contact; ?>"><?php echo $text_contact; ?></a></li>
         <li><a href="<?php echo $privacy; ?>"><?php echo $text_privacy; ?></a></li>
         <li><a href="<?php echo $terms; ?>"><?php echo $text_terms; ?></a></li>
         <li><a href="<?php echo $affiliate; ?>"><?php echo $text_affiliate; ?></a></li>
       </ul>
      </div>
    </div>
</div>
</div>
</body></html>

edit: There is a large amount of white space below the footer on pages with little content. I am not looking for the footer to scroll with the page so a fixed position is not an option. I'm trying to remove the white space and have the footer remain at the bottom.

Answer 1

If you want the footer to stick to the bottom of the screen when there is not enough content to fill the screen, but not overlap the content if there is enough content for it to scroll, try https://code.google.com/p/cleanstickyfooter/.

Answer 2

You can achieve your problem by adding below line of code to you css.

#footerwrapper { position:fixed; bottom:0px; left:0px; right:0px; }

Answer 3

Add to your css:

#footerwrapper {
    ...
    position: fixed;
    bottom: 0; left: 0
}

From W3Schools:

An element with fixed position is positioned relative to the browser window.

It will not move even if the window is scrolled