FOOTER ALWAYS AT THE BOTTOM – FLEXBOX

Author:

  • Ananya Neogi
  • August 13, 2019

Made with:

  • HTML / CSS

About the code:

This is a nice and simple Flexbox Footer. When a web page doesn’t have enough content to fit the screen, the footer doesn’t stay at the bottom so it ends up looking weird. Solution: Do the layout using flex columns. In addtion to that either, add flex-grow: 1 to the content area, here it is the section. Or add margin-top: auto to the element you you wish for it to always stay at the bottom, here it is footer.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: Yes

Dependencies:

Download Demo and Code

Add a Comment

Your email address will not be published. Required fields are marked *