How To Make Footer Stick To The Bottom Of Web Page The Easy Way

If you are new to web development and just created some HTML page then perhaps you are in situation where you have not enough content in your page and you just realized that your footer is not at the bottom page. Well technically when looking at the code it is at the bottom, but your page simply doesn’t have enough content. Do not worry. There are solutions to your problem and I will help you to make that footer stick to the bottom of the web page no matter how much or how many of content you have there.

Using Flex Box To Make Footer Stick

More often then not you are or will be working with dynamic content. Simplest way to fix this would be absolutely position the footer at the bottom of the page, but then if the content grows larger than the viewport, the footer will remain fixed to the bottom of the screen.

That’s why I recommend you to use Flex for your footer placement. Let’s say you have HTML code looking something like this:

<div class="content">
  Content goes here
</div>
<footer>
  I'm a sticky footer
</footer>

Then you would need to add a flex property to your body:

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

By doing so you are telling body element to become flex element and flex elements vertically. Then make the minimum height based on the viewport. Then all you have to do is add the following property to your content div.

.content {
  flex: 1 0 auto;
}

That line will force the content block to space out between the content and the footer. Or you can give auto top margin to your footer. Result would be the same.

footer{
    margin-top: auto;
}

So this is code example to stick a footer to the bottom with CSS.