How to use CSS to make the HTML page footer stay at bottom of the page with a minimum height, but not overlap the page?

Spread the love

To use CSS to make the HTML page footer stay at bottom of the page with a minimum height, but not overlap the page, we use flexbox.

For instance, we write

<div class="container">
  <header></header>
  <main></main>
  <footer></footer>
</div>

to add a div with some elements inside.

Then we write

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

main {
  flex: 1;
}

to make the div a flex container with display: flex;

We make the flex direction vertical with flex-direction: column;

And we set the min height of the div with min-height: 100vh;

Then we make the main element fill the vertical space not filled by the header and footer elements with flex: 1;.

By John Au-Yeung