Hacker News new | ask | show | jobs
by troels 4895 days ago
Had me confused for a bit. Keeping it at the bottom is trivial. Just put it last in the html markup - right before </body>.

What you meant to say seems to be "at the bottom of the screen", which prompts more questions than answers.

Then again, maybe I'm misunderstanding your intentions entirely, since you state that your naïve solution was to use position:absolute. But then in the next paragraph, you talk about position:fixed. Was the absolute-part a typo?

1 comments

The position:fixed reference was a typo. Good catch!
I'm still confused though, since the linked jsFiddle uses position:absolute. Clearly that would never work - That's pretty basic html/css wisdom. I would expect position:fixed to do work though, although your post suggest that that might not be the case on all platforms. I guess I wouldn't realise that until I began testing on a broader range of devices than the normal development stack holds.
position: fixed is if you actually want the footer to always be visible, with the main body content scrolling out from under it. To my knowledge, this works across all devices.

The goal of this snippet is to have the footer always below the content, but in the event the content is shorter than the page height, the footer should still be placed at the bottom of the page.

Really Javascript isn't a terrible solution here, since it only needs to be run on load and on window resize (rare events), but the CSS is indeed nifty and worth knowing it exists.