Trusted answers to developer questions
Trusted Answers to Developer Questions

Related Tags

css
sticky footer
footer

How to create a sticky footer in CSS

Educative Answers Team

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 ©2022 Educative, Inc. All rights reserved
RELATED COURSES

View all Courses

Keep Exploring