背景颜色不适用于整个页面Vue.js [重复]答案

【问题标题】：Background color doesn't apply to whole page Vue.js [duplicate]背景颜色不适用于整个页面Vue.js [重复]
【发布时间】：2019-06-22 09:50:39
【问题描述】：

我正在尝试将 background-color 属性应用于我的 Vue.js 应用程序。由于我希望它显示在所有页面上，因此我将 CSS 直接应用于 index.html 中的标记：

<head>
<style>
body, html {
  padding: 0;
  margin: 0;
  width: 100%;
}
body {
  background-color: black;
}
</style>
</head>

 <body>
   <div id="app"></div>
   <!-- built files will be auto injected -->
 </body>

所以，正如我通过检查器看到的，html 并没有覆盖整个页面

如何将背景色应用到整个页面？

【问题讨论】：

如果您可以创建一个对您有很大帮助的现场演示
你试过了吗：body, html, #app { min-height: 100%; }？
@laruiss 仍然无法正常工作。它也不会将背景颜色应用于 html，仅应用于 body 标签
它需要整个身体 - 但是，身体不是全高。您需要将 HTML 和正文设置为 100% 高度。

标签： javascript vue.js

【解决方案1】：

这似乎有效：

<head>
<style>
body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100vh;
}
body {
  background-color: black;
}
</style>
</head>

 <body>
   <div id="app">
     &nbsp;
   </div>
   <!-- built files will be auto injected -->
 </body>

这里是Codepen

【讨论】：

非常感谢。解决了我同样的问题

【解决方案2】：

未应用 CSS 规则，因为您没有指定 height，而只指定了 width。

body, html {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100%; // add this rule
}

【讨论】：