vue设置背景色时的坑

使用vue的时候需要设置当前页面的背景色,但是你会发现当页面内容不够铺满整屏时 背景色不会铺满整屏

(红色为背景色） 

这是因为高度不够 所以我们需要设置样式 

在App.vue里面设置

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

​

 然后在当前需要设置背景的页面设置

<template>
  <div style="width: 100%; height: 100%; background-color: red;"></div>
</template>

​

这样就算没有内容时 背景色也能铺满整屏

还有一种情况就是当内容超出屏幕时 滚动后面的内容会没有背景色

 这时候就只需要设置当前页的样式

<template>
  <div style="width: 100%;min-height: 100%;background-color: red;"></div>
</template>

这样背景颜色就能正常显示了~~