html - min-height: 100% 似乎不起作用，div 没有占满高度

Question

我有一个codepen可以让事情变得更容易。

html {
  height: 100%;
}

body {
  min-height: 100%;
  padding: 1.25em;
  background-color: #292c37;
  border: 1px solid red;
}

.main-app {
  min-height: 100%;
  display: grid;
  grid-template-rows: auto 1fr auto;
  border: 1px solid green;
}

header {
  background-color: wheat;
}

main {
  background-color: firebrick;
}

footer {
  background-color: skyblue;
}

header, main, footer {
  padding: 1.25em;
}

<div class="main-app">
  <header>Header</header>
  <main>Main</main>
  <footer>Footer</footer>
</div>

我想.main-app采用完整的可用高度，但正如您所见，由于某种原因它没有这样做。

我究竟做错了什么？

标签： htmlcss

Answer 1

使用height: 100vh;而不是 100%。