背景颜色不适用于整个页面Vue.js [重复]
Posted
技术标签:
【中文标题】背景颜色不适用于整个页面Vue.js [重复]【英文标题】：Background color doesn't apply to whole page Vue.js [duplicate] 【发布时间】：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% 高度。
【参考方案1】：
这似乎有效：
<head>
<style>
body, html
padding: 0;
margin: 0;
width: 100%;
min-height: 100vh;
body
background-color: black;
</style>
</head>
<body>
<div id="app">
</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
【讨论】：
以上是关于背景颜色不适用于整个页面Vue.js [重复]的主要内容，如果未能解决你的问题，请参考以下文章