CODEWITHSUNDEEP
javascripthtmlcsssticky-footer
RyanMac
RyanMac

Reputation: 767

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?

Upvotes: 0

Views: 200

Answers (2)

Frank Conijn - Support Ukraine
Frank Conijn - Support Ukraine

Reputation: 3190

I'm not sure what exactly you're trying to achieve, but I'm covering all known sticky footer techniques, or the techniques for what people (sometimes erroneously) call sticky footer, in this tutorial. Let us know if it helps you.

Upvotes: 0

spaaarky21
spaaarky21

Reputation: 6858

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

Upvotes: 1

Related Questions