Question

我正在尝试将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不能覆盖整个页面

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

Answer 1

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

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

Answer 2

这似乎有效：

<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

背景颜色不适用于整个页面Vue.js

2 个答案: