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

【问题标题】：My #app div created by Vue is not taking full size of the page我由 Vue 创建的#app div 没有占据页面的完整大小
【发布时间】：2020-08-03 14:17:23
【问题描述】：

我正在尝试将#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;
}

【问题讨论】：

你试过 html, body, #app { height: 100% } 吗？
@Anatoly 是的，但由于某种原因，它会创建滚动条溢出，在页面底部形成一个白条（我有背景色，但它以白条结束并继续） .我设置了 max-height: 100%;在#app 中试图消除此问题

标签： css vue.js styles height

【解决方案1】：

我的任务是 - 最大正文宽度 - 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;
}

【讨论】：

【解决方案2】：

对于这个问题，您可以使用视口高度单位，它们根据整个视口的高度工作。

#app {
  height: 100vh;
}

【讨论】：

【解决方案3】：

这不是 vue 问题，但可能在 CSS Height % 问题下您可能需要为 height:100% 声明下面的代码才能为您的 div 工作

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

P/S：也许是时候试试flexbox

【讨论】：