Trusted answers to developer questions

How to create a sticky footer in CSS

Get Started With Data Science

Learn the fundamentals of Data Science with this free course. Future-proof your career by adding Data Science skills to your toolkit — or prepare to land a job in AI, Machine Learning, or Data Analysis.

A sticky footer is a footer that sticks to the bottom of the page regardless of panel size.

Let’s start by making a basic footer:

Set display to flex and flex-direction to column, in body. Also, set the margin-top to auto, in footer:

Now, set the height in html and min-height in body to 100%:

The footer is now sticky:

Let’s see if changing the size of the ​panel and adding more content has any effect on it:

The sticky footer remains intact.

RELATED TAGS

css
sticky footer
footer
Copyright ©2024 Educative, Inc. All rights reserved
Did you find this helpful?