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%.
