How to get the footer to stay at the bottom of a Web page with CSS?

Spread the love

Sometimes, we want to get the footer to stay at the bottom of a Web page with CSS.

In this article, we’ll look at how to get the footer to stay at the bottom of a Web page with CSS.

How to get the footer to stay at the bottom of a Web page with CSS?

To get the footer to stay at the bottom of a Web page with CSS, we use flexbox.

For instance, we write

<body>
  <div class="content">Hello World!</div>
  <div class="spacer"></div>
  <footer class="footer"></footer>
</body>

to add some elements into the body element.

Then we write

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.spacer {
  flex: 1;
}

.footer {
  height: 50px;
  background-color: red;
}

to make the body a flex container with display: flex;.

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

And we use flex: 1; to make the div with class spacer take the most room and make the footer element stay at the bottom.

Conclusion

To get the footer to stay at the bottom of a Web page with CSS, we use flexbox.

Leave a Reply

Your email address will not be published.