我的Vue创建的#app div没有占满整个页面的大小

Question

我正在尝试将#app设置为100％的高度，但无法实现。#app div不被视为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;
}

- Unmy_

---

你尝试过使用 html、body、#app { height: 100% } 吗？ - Anatoly

@Anatoly 是的，但出于某种原因它会创建一个滚动条溢出，在页面底部产生一个白色条（我有一个背景颜色，但它在一定高度后结束并继续出现一个白色条）。我已经在 #app 中设置了 max-height: 100%; 试图解决这个问题。 - Unmy_

Answer 1

您可以使用视口高度单元来解决此问题，它们是相对于整个视口的高度而工作的。

#app {
  height: 100vh;
}

- Tom Handcock

Answer 2

我的任务是 - 最大宽度 - 1980像素。可以删除宽度限制。

html {
    max-width: 1980px;
    margin: 0 auto;
    height: 100%;
}
body {
    font-family: Arial sans-serif;
    color: $textcolor;
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 1980px;
    min-height: 100%;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
}
#app {
    height: inherit;
    width: inherit;
}

- Михаил

Answer 3

对于后来遇到这个问题的任何人，app.css或index.css可能存在一些代码干扰尺寸和属性的痕迹，删除其中不会使用的任何内容可以解决问题。

- Bilhan Latino

Answer 4

这不是 Vue 的问题，而很可能是 CSS 高度百分比的问题。 您可能需要声明以下代码，使高度为 100% 的 div 生效

html, body {
  margin:0;
  padding:0;
  height:100%;
}

P/S: 也许是时候尝试一下 flexbox

- SC Kim