Make footer stay at bottom of fold

1

Does anyone know how I could make my footer stay at the bottom of the fold?

For example, my homepage only has 3 sample posts listed, and the footer is directly beneath the third (instead at the bottom of a page where the footer should be).

I thought about adding a margin, but on pages where it makes sense to have the footer shortly beneath the post content, adding a huge margin would create a bunch of white space and make it look just as unnatural as when there’s no space…

Any ideas?

Thank you!

2

You’re looking for a sticky footer. Easier said than done I’ve found. There usually needs to be some compromise such as fixed height or non-responsive. Here’s the best solution I’ve found: https://gist.github.com/aalaap/3066704

It takes a bit of tweaking to get up and running on Bootstrap but it’s the most flexible/responsive solution I’ve seen.

3

Thank you for the response.

I found a very simple solution: add

div.content.row {margin-bottom: 200px;}

to my variable.css file and that did the trick. Now the footer is always below the content in the same place, since div.content.row is like the container for everything else that falls within it.