Search code examples
htmlfooterviewportfixed

Fixed div at the bottom


I'm learning HTML & CSS, and I'm having an issue. My page is already built : a header, some blocks, a footer. Very simple, I'm a beginner. I'd like the footer to stay fixed on the bottom until it reaches a limit situated 50px under the last block (if we scale the viewport). Then it should just stay there like a normal block... But I can't figure out how to make it happen!

Could you help me, please?

By the way, I speak French : if something isn't clear enough, please tell me and I'll try to explain.

Thank you in advance for your help, Adrien.


Solution

  • There are many different ways to handle this with purely CSS.

    Firstly Twitter Bootstrap has a nice means of doing this. Link is here

    Or you could use the CSS Sticky Footer See here

    The key is to create a negative bottom margin in the main container, using the exact height you want your footer to be.

    I hope this helps.