How to set 100% min-height with CSS?

Spread the love

Sometimes, we want to set 100% min-height with CSS.

In this article, we’ll look at how to set 100% min-height with CSS.

How to set 100% min-height with CSS?

To set 100% min-height with CSS, we set the height to 100%.

For instance, we write

<html>
  <body>
    <div id="content">...</div>
    <div id="footer"></div>
  </body>
</html>

to add the elements.

For instance, we write

html,
body {
  height: 100%;
}

#content {
  height: 100%;
}

#footer {
  clear: both;
}

to set the height of the html. body, and the first div to 100%.

We use clear: both; on the footer div to keep the first div from taking up the space.

Conclusion

To set 100% min-height with CSS, we set the height to 100%.

Leave a Reply

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