Search code examples
javascripthtmlcsssticky-footer

Sticky footer hack is close, any tips to get me closer?

Here's the website: http://www.square1cards.com/

I'm trying to retrofit a responsive design with a sticky footer and so a lot of the CSS options we're incompatible and the fixed option really didn't satisfy either.

Since my top content (for the homepage) is a fixed height, through javascript I tried simply changing the top margin to the difference between the window height and that fixed value (when window height is greater than the fixed value). A crude hack.

If you slowly resize the browser height it works fine but when you QUICKLY resize the height it causes the footer to jump off the screen slightly. If I can resolve that, I should be ok. Any ideas?

Solution

  • I found Matthew James Taylor's tutorial to be very useful. It worked for me using only HTML and CSS. I would highly recommend that approach instead of using JavaScript.

    http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page