0

I have this code:

html, body {
  height: 100%;
  margin: 0;
  font-family: Helvetica;
  font-size: 25px;
}

.header {
  background-color: lightsalmon;
  padding: 20px;
  text-align: center;
}

.main {
  padding: 20px;
  text-align: center;
  flex: 1 1 auto;
}

.footer {
  background-color: lightblue;
  padding: 20px;
  text-align: center;
}

.wrapper {
  border: 1px solid black;
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <div class='wrapper'>
    <header class='header'>Header</header>
    <main class='main'>Main</main>
    <footer class='footer'>Footer</footer>
  </div>
</body>
</html>

The question is: what's the difference between height: 100% and min-height: 100% in .wrapper class in CSS? In this code it makes no changes, but are there any cases when it makes a sense?

dedavarera
  • 53
  • 5
  • [Please refer to this stack answer](https://stackoverflow.com/questions/42077726/what-is-the-difference-between-min-height-and-height-property) – Aditya Bhoir Aug 06 '21 at 06:26

1 Answers1

0

height: 100% will go to 100% of the container height; min-height: 100% should expand past the container's height if it needs too.

Keep in mind that min-height is not supported in IE.

Rakesh kumar Oad
  • 1,332
  • 1
  • 15
  • 24