Skip to main content

How to Make Footer Stick to the Bottom of the Page

2 min read

The easiest way you can make your websites footer stick to the bottom of the page no matter what the height of your webpage is to use CSS flexbox.

This is our example HTML webpage's code:


<div class="content">
<h1>Content Title</h1>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Necessitatibus
incidunt explicabo error, maxime reiciendis consectetur sapiente velit
perspiciatis, quibusdam enim facere praesentium vitae alias dignissimos
debitis impedit sequi, assumenda ipsa.

<h3>Created By Shafi</h3>
<p>&copy; 2020</p>

We've connected our stylesheet with this page and stripped down the default styling by using this CSS Snippet

* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;

At this moment our webpage looks like this:

To take our footer element to the bottom of the page, we're going to use our body element as a flex container. All the children of body will thus turn into individual flex items.

body {
display: flex;
flex-direction: column;
min-height: 100vh;

Here, using the display: flex turned our body element into a flex container.

The flex-direction property specifies the direction of the flexible items. We set flex-directions property as column. Thus all the children of body will flow from top to bottom.

And we set a min-height property on our page so that no matter what the contents length is, the body height will at least equals to the screen size.

Well, the CSS didn't do much to our webpage, did it?

Worry not! We'd only need one more line of code to set our footer to the bottom of the screen.

.content {
flex: 1;

The flex property is a shorthand property for:

  • flex-grow
  • flex-shrink
  • flex-basis

The flex property sets the flexible length on flexible items.

This tells our content div to take all the available unused space.

Our webpage now looks like this!

Cheers 馃帀

Now if we want to center all the contents inside of our content div, we can just turn it into a flex container like this

.content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;

And now the end result looks like this