How to create a fixed footer with HTML & CSS

Img source: stackoverflow

If you are a web developer or learning web development, one of the most problems you might encounter is how to create a footer that sticks at the bottom of the page and never changes even if the layout of the document changes.

In this post, I will show you how.

We will create our HTML and CSS files using codepen. You can simply do this using your favorite text editor. Type the following code in your editor.

What did we do here?

In our HTML file, we created our header , page-content, and footer sections. They are all created inside the body tag.

In our CSS file, we made the body to display: flex; and content to be aligned from top-to-bottom with flex-flow: column;

That is all you need to make a fixed footer!