How to create a sticky footer

You may sometimes encounter a situation where your web page doesn’t take the full height of the browser window and you want your footer to stay at the bottom of the page despite that. That is why it’s important to understand how to create sticky footers.

There are several ways to make the footer sticky, but I will show you the one that I usually use with flexbox. So lets get started!

We will start by giving the html and body tags a height of 100% because we will need to add flexbox to the body tag.

|html,body{
height: 100%;
}
body{
display: flex;
flex-direction: column;
}

Now to make this work, you will need to divide the sections inside the body into two sections. One for the content of the page and the other one for the footer, and you can even add another one for the header if you want. In this tutorial, I only have two sections main and footer. Here is the html code:

<body>
<main>
This is the main section
</main>
<footer>
This is the footer
</footer>
</body>

The main section needs to have a flex-grow of 1. This will make it take the full remaining height, and push the footer to the bottom of the page, and that’s it :D

|main{
background: lightgreen;
flex: 1 0 auto;
}
footer{
background: lightblue;
flex-shrink: 0;
height: 60px;
}

I hope that you liked this simple tutorial, and see you in the next one :)

I write about topics related to web development.