When I began to work on the frontend of a website, I had problem with the position of my footer. Indeed, on some pages, the footer can be on the middle of the page, instead of the bottom.

footer

The solutions that I learned are very simple.

The calc() value

In my html, below the header, I have a <div class="container"></div> that take every content inside, without the footer. In my css, on this .container, I add the 100vh value to the min-height property. It will take the entire space of the window.

Here I can see the result:

footer

Now I have a small problem, the footer doesn’t appear anymore, because it placed too down in the window. That ‘s why the calc() value is very useful. I will subtract the 100vh value - the height of the footer.

So, in my css I add:

container {
  min-height: calc(100vh - 100px);
}
  • 100vh represents the min-height of the container.
  • 100px represents the height of the footer.

Here the result:

footer

There is another way, if you enjoy using the flex box, it can do the same too.

The flexbox solution

In my css, on the container, I add this code:

Then I can apply the flex property for each row(sections, or div), within the container:

The flex property with value 1, will divide the entire space between the elements and push the footer to the bottom. As in the first solution, we can avoid the footer too down, by using the calc() value, in the min-height property.

Even if I appreciate using flexbox, it is still not supported by every versions of IE. Here the documentation