How To Make Footer Stick To The Bottom Of Web Page

Posted by TotalDC

If you are new to web development and just created some HTML page then perhaps you are in a situation where you do have not enough content on your page and you just realized that your footer is not at the bottom of the 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 Website Footer Stick To The Bottom Of Web Page

More often than not you are or will be working with dynamic content. The simplest way to fix this would be to position the footer at the bottom of the page, but then if the content grows larger than the viewport, the footer will remain fixed at 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 the body element to become a 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. The result would be the same.