Overview

If your website has pages with little content, your footer may end up in the middle of the page on larger screens. This doesn’t look good, and it can be fixed with a simple CSS trick.

Solution

  1. Force the body to take up at least the full height of the viewport.
  2. Use flexbox and space-between to push the footer away from the rest of the content.

You must only have two direct children of the body element to make this work.


<body>
<main>Main content</main>
<footer>Footer</footer>
</body>

<style>
  body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    justify-content: space-between;
  }
</style>

Tailwind example


<body class="margin-0 flex flex-col min-h-screen justify-between">
<main>Main content</main>
<footer>Footer</footer>
</body>

Demo

In this example, there is empty space, and the footer is pushed to the bottom.

Demo with scroll

In this example, the page is filled with content, and a scrollbar is visible. The footer appears at the end of the content.