The following CSS can be used to set the minimum height of the main page area. This requires a fixed height for header and footer elements.

For example, if you have something like this for HTML:

<body>
  <header class="layout-header">
    ...
  </header>
  <main class="layout-main">
    ...
  </main>
  <footer class="layout-footer">
    ...
  </footer>
</body>
.layout-header {
  height: 50px;
}
.layout-footer {
  height: 100px;
}
.layout-main {
  min-height: calc(100vh - 150px);
}

If you don’t know exactly what the heights will be, use a value that will be at least as much. If more height is used, it will just mean that the user may need to scroll. But if you can make your header and footer a fixed height, this can provide the best results.

You can also have several different heights and use media queries. Just make sure to adjust all the above values for each media query that changes the heights.

This technique works based on the viewport height, and can be useful for pages that have less content. Instead of the footer being high up on the page, this causes it to be down at the bottom.

Other options are using fixed or absolute positioning to set the footer to the bottom.