奇怪的身体填充（VueJS + Nuxt，CSS）

Posted

技术标签:

【中文标题】奇怪的身体填充（VueJS + Nuxt，CSS）【英文标题】：Strange body padding (VueJS + Nuxt, CSS) 【发布时间】：2022-01-16 10:59:47 【问题描述】：

我有很少的 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;

你可以把它放在整个身体上，但我真的不需要它，这个背景 gif 应该只有几页，所以，如果将 body 更改为类名（比如说 main）并像这样使用这个类：

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

我会有奇怪的填充物：

我该如何解决这个问题？

【问题讨论】：

我们可能需要minimal reproducible example 或 github 存储库来有效地帮助您。最后，通过检查实际的 gif/body，它可能可以使用您的浏览器开发工具修复。 【参考方案1】：

假设显示的模板是渲染的根组件...

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

如果您想保留更改之前的原始边距，请仅保留 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>

【讨论】：

以上是关于奇怪的身体填充（VueJS + Nuxt，CSS）的主要内容，如果未能解决你的问题，请参考以下文章

如何使用 Axios（VueJS、Nuxt）制作 .post

我们如何在 Nuxt?Vuejs 项目中仅包含来自 lodash 的必需模块？

无法提交 Axios Post 表单 Nuxt.js (VueJS)

将一个变量的值从子组件传递给两个父组件，vuejs？ nuxt

使用 Nuxt 对 VueJS 应用程序的 Jest 测试覆盖率

Vuejs-nuxt（s-s-r 模式）无法通过插件内部的 getter 获取 UserUUID。它显示未定义的 GetUserUUID