vue中想在单个页面设置背景色，但是背景色只是显示在容器中问题

原创已于 2022-10-11 17:39:21 修改 · 425 阅读

CC 4.0 BY-SA版权

文章标签：

于 2022-10-11 11:40:27 首次发布

1 篇文章

订阅专栏

在Vue项目中，遇到单个页面背景色仅显示在内容容器内的问题，即使设置了height: 100%。分析原因发现是body元素未完全被内容撑开。解决方案是调整CSS样式，确保退出登录后的无内容区域也能显示背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

出现问题效果

退出登录上发背景色显示，但是退出登录下方无内容区却不显示背景色
并且，设置了height：100%；但整个body我们只撑开了内容部分
请添加图片描述

//vue
<template>
  <div class="my-container">
   ...
  </div>
</template>

//css
.my-container {
  background-color: rgb(246, 246, 247);
  height: 100%;
  }

在App父组件中使用该路由组件时，会在外层包一层div

// app父组件
<template>
  <div>
    <router-view></router-view>
  </div>
</template>

让.my-container容器脱离文档流，即可解决( 设置position：fixed；)

//css
.my-container {
  background-color: rgb(246, 246, 247);
  height: 100%;
  width: 100%;
  position: fixed;
  }

退出登录下方等无内容区域背景色就显示出来啦！
请添加图片描述