vue给单个页面添加背景颜色CSS解决.

在单页面应用,想给单个页面添加背景颜色,但是直接给根标签添加background-color属性,即使添加了height:100%,也无法填满整个屏幕,只能填充内容区.
下面假设给home页添加背景颜色

方法一:

home页:

<style lang="scss" scoped>
.home{;
  height: 100%;
  background-color: rgb(156, 155, 155);
}

app.vue页:

body,html,#app{
  width: 100%;
  height: 100%;
}

这个方法不好,背景颜色只能覆盖整个屏幕的高度,若内容超过了屏幕高度,超出的部分也是没有背景颜色的.

方法二:

home.vue页:

<style lang="scss" scoped>
.home{;
  height: 100%;
  overflow: auto;
  background-color: rgb(156, 155, 155);
}
// 去掉滚动条
.home::-webkit-scrollbar{
  display: none;
}

用overflow:auto属性,此方法可行,

方法三:

app.vue页:

#app {
  display: flex;
  flex-direction: column;
}

home.vue页

.home{;
  flex: 1;
  height: 100%;
  background-color: rgb(156, 155, 155);
}

推荐此方法