我由 Vue 创建的 #app div 没有占据页面的完整大小

Question

我正在尝试将 #app 设置为 100% 高度，但无法实现。div #app 不被视为 Body 的子级吗？我每次都会遇到这个问题，每次我都必须以不同的方式解决。

有没有办法完全避免这种情况的发生呢？CSS：

* {
  margin: 0;
  padding: 0;
  font-family: "Nunito";
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
html {
  height: 100%;
}
body {
  transition: background 0.25s ease-in-out;
  min-height: 100%;
}
#app {
  max-height: 100%;
  min-width: 100%;
  position: relative;
}

Answer 1

您可以使用视口高度单位来解决此问题，它们以整个视口的高度为单位。

#app {
  height: 100vh;
}