Blank theme: Sticky footer at bottom of the page

Question

I use the blank theme for my shop. The design looks great except when there is only one item in the cart or if it is empty. In this case the content in is very short, with the footer just coming below it, leaving a lot of space below. This doesn't look good. I have tried various solutions to get the footer down to the bottom of the browser window but none of them didn't work. I guess, this is due to the markup of the blank theme. Is there a way to push the footer down? Any help would be greatly appreciated. Here is a link to my shop: http://he023rz5.edis.at/shop/checkout/cart/

Here are a couple of solutions I tried. I could reproduce them perfectly using the markup they suggest but with the blank theme all of them failed

Answer 1

This is not a Magento-specific question - but I can't resist a little Frontend Dev challenge^*.

Your theme as-displayed can force the footer-container to the bottom with the following CSS:

.footer-container {
    position: fixed;
    width: 400px; /* required */
    bottom: 0px;
    left: 50%; /* to position the left edge in the center of the page */
    margin-left: -200px; /* to pull it into center */
}

In your particular theme, however, the width and positioning will be tricky for your particular styling (as well as the background color) because you have positioned your entire body as position: relative. It looks as if your footer is helping to maintain the height of your site's main content. When you pull it out it collapses.

To see how it works without your custom positioning here's a Fiddle:

http://jsfiddle.net/U69mz/1/

As an aside, centering position: fixed elements requires a little workaround -- you need to set the position to be left: 50% and then a negative left-margin that is half the width of the element. See my fiddle for more details.

---

_{^*Disclaimer: I'm not an expert frontend developer. I'm sure there will be other methods that may be more current or correct. Take my advice with a grain of salt!}