时间戳

首页 > 解决方案 > 这段代码中的高度和最小高度有什么区别？

html - 这段代码中的高度和最小高度有什么区别？

问题描述

我有这个代码：

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>

问题是： CSS中.wrapper类中的height: 100%和min-height: 100%有什么区别？在这段代码中，它没有做任何改变，但有没有任何情况下它有意义？

标签： htmlcssflexbox

解决方案

height: 100%将达到容器高度的 100%；min-height: 100%如果需要，也应该扩展超过容器的高度。

请记住，IE 不支持 min-height。

推荐阅读