How to set footer at bottom of page or content, whichever is lower with CSS?

Spread the love

Sometimes, we want to set footer at bottom of page or content, whichever is lower with CSS.

In this article, we’ll look at how to set footer at bottom of page or content, whichever is lower with CSS.

How to set footer at bottom of page or content, whichever is lower with CSS?

To set footer at bottom of page or content, whichever is lower with CSS, we use flexbox.

For instance, we write

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#main-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

article {
  flex: 1;
}

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

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

Then we make the article elements inside the wrapper stretch to the bottom with flex: 1;.

Conclusion

To set footer at bottom of page or content, whichever is lower with CSS, we use flexbox.

Leave a Reply

Your email address will not be published. Required fields are marked *