奇怪的 body padding (VueJS + Nuxt, CSS)

Question

我很少使用 VueJS + NuxtJS，它有背景 gif。现在它看起来像这样：

body {
  margin: 0 auto;
  background: url("assets/video/background-darked.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  @media only screen and (max-width: 860px) {
    overflow-y: scroll;
  }
}

如你所愿我总体上有body，但我真的不需要它，这个背景gif应该只在几页上，所以，如果把body改成class名称（假设 main）并像这样使用此 class：

<template>
  <div class='main'>
    <Header />
  </div>
</template>

我会有那个奇怪的填充物：

我该如何解决这个问题？

Answer 1

假设显示的模板是呈现的根组件...

将这些样式从 body 移动到类名将默认 <body> 的样式使用基于用户代理的默认页边距，这可能是您使用“奇怪的填充”的原因提到。

如果您想保留更改之前的原始页边距，请仅保留 margin 样式：

// MyPage.vue
<style>
body {
  margin: 0 auto;
}

.main {
  background: url("assets/video/background-darked.gif") no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  @media only screen and (max-width: 860px) {
    overflow-y: scroll;
  }
}
</style>

奇怪的 body padding (VueJS + Nuxt, CSS)

Strange body padding (VueJS + Nuxt, CSS)

html

javascript

css

vue.js

nuxt.js