Bootstrap 3 - floating footer

Question

I would like a design on my site where the footer is always present on the screen, and floats. As the user scrolls down the footer moves with them. I haven't sold myself on the idea - but that's where I think I want to link to the corporate stuff from. If this is a bad idea, please let me know the limitations (on mobile maybe?).

I have seen designs and examples that have the footer at the bottom of the page, but if that is "below the fold" the user needs to scroll down to see it. Not good.

Can someone provide me the basics on how this is accomplished?

Thanks in advance.

Answer 1

Bootstrap has a class that does what you want: .navbar-fixed-bottom. Using that class is the better solution, since you do not need custom css.

However, if you did want to use custom CSS, here's how. Assuming your footer element has ID 'footer':

#footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}

And you have to make sure that when user scrolls to the bottom of the page the footer must not covet the lowest content. To avoid that the simplest solution is to add bottom margin to body element in the same amount as footer height. Assuming your footer element is 100px tall you could use this code:

body {
  margin-bottom: 100px;
}

But to make sure you avoid footer overlap you would have to use jQuery to update body's bottom margin on screen size change, because footer height can change, especially in responsive layouts.