Bootstrap 3 - Floating Footer

Question

I need a design on my website where the footer is always present on the screen and floats. When the user scrolls the footer, he moves with them. I did not sell myself on this idea - but I think I want to connect with corporate material. If this is a bad idea, let me know about the limitations (perhaps on a mobile phone?).

I have seen projects and examples that have a footer at the bottom of the page, but if it's “below the fold”, the user needs to scroll down to see it. Not good.

Can someone explain to me how this is done?

Thanks in advance.

Answer 1

Bootstrap has a class that does what you want: .navbar-fixed-bottom . Using this class is the best solution since you don't need custom css.

However, if you really want to use custom CSS, here's how to do it. Assuming the footer element has a footer ID:

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

And you have to make sure that when the user scrolls to the bottom of the page, the footer should not require the lowest content. To avoid this, the easiest solution is to add a bottom margin to the body element in the same size as the footer height. Assuming the footer element is 100px high, you can use this code:

 body { margin-bottom: 100px; } 

But to make sure that you avoid overlapping the footer, you will need to use jQuery to update the extreme edge of the body when resizing the screen, since the height of the footer may change, especially in flexible layouts.