![](https://webartdevelopers.com/blog/wp-content/uploads/2021/09/footer-always-at-the-bottom-flexbox-1024x576.png)
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