Vue3：页面设置了背景颜色，缩小屏幕后横向拖动滚动条，右边内容没有背景颜色覆盖

问题

在Vue3项目中，想给整个页面设置背景颜色，但是缩小浏览器后并横向拖动滚动条，发现右边的页面内容没有背景颜色覆盖，即背景颜色是空白的。

解决

• 出现上述问题是因为背景颜色的样式没有正确应用到页面的所有部分
• 如果想给整个页面一个背景颜色，需要将选择器设置为 body 或 html，在App.vue中设置以下样式：

<style lang="less">
html,
body {
  height: 100%;
  background-color: rgb(1, 24, 109);
  background-size: cover;
}
</style>

而原先出现上述问题，是因为我把背景颜色设置在了装载页面内容的容器盒子中，所以横向拖动滚动条后，右边的内容没有被背景颜色覆盖。