How to create a sticky footer in CSS

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.
New on Educative
Learn to Code
Learn any Language as a beginner
Develop a human edge in an AI powered world and learn to code with AI from our beginner friendly catalog
🏆 Leaderboard
Daily Coding Challenge
Solve a new coding challenge every day and climb the leaderboard

Free Resources

Copyright ©2025 Educative, Inc. All rights reserved