How to keep the Footer at bottom using CSS Flexbox

When you're working on an HTML page, especially the homepage, you might have a footer.

A footer is where you can place your most important links, copyright information, and other information that you want to be visible on every page.

Since footers go at the bottom, you need to make sure it is the last element on the page, no matter the size of the page.

In this post, we'll learn how you can use CSS flexbox to ensure that your footer remains at the bottom of the page.

HTML Markup

To start, let's create a basic page that uses a footer.

	<!DOCTYPE html>
<html>
    <head>
        <title>Example page</title>
    </head>
    <body>
        <article>
            <header>header</header>
            <main>main</main>
            <footer>footer</footer>
        </article>
    </body>
</html>

We just have a basic article element, with a header, main, and footer.

Try it out yourself:

HTML

<!DOCTYPE html> <html> <head> <title>Example page</title> </head> <body> <article> <header>header</header> <main>main</main> <footer>footer</footer> </article> </body> </html>
```
				
			
```

As you can see, without any styles, the footer just sits right below the main element, instead of being at the bottom of the page.

Now let's move on to the styles.

CSS Styles

With our HTML markup established, we can apply the following styles to get the footer to stay at the bottom, regardless of the amount of content on the page.

	html,
body {
    height: 100%;
}

article {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

main {
    flex-grow: 1;
}

Try it below:

HTML
CSS

<!DOCTYPE html> <html> <head> <title>Example page</title> </head> <body> <article> <header>header</header> <main>main</main> <footer>footer</footer> </article> </body> </html>
```
				
			
```
html, body { height: 100%; } article { display: flex; flex-direction: column; min-height: 100%; } main { flex-grow: 1; }
```
				
			
```

That's pretty much it. Now the footer is at the bottom of the page even though there isn't enough content to fill the page.

When there is enough content, the footer will follow naturally.

Conclusion

In this post, we looked at how to use CSS flexbox to ensure that your footer is at the bottom of the page.

Using the HTML markup and styles above, you can have a footer that remains at the bottom of the page even when there is not enough content to push it down.

Hopefully this helped you and thanks for reading!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!