小程序 页面可视区设置全屏背景颜色

在很多时候，页面要设置可视区域都有背景色。

但是 实际页面大小并没有占满全屏，这个时候就会很纠结，这里我记录一下我的做法。

会去设置高度100vh  然后设置颜色。

但会发现滚动之后的颜色并不是白色

这样是错误的设置全屏背景色

background-color: red;
height: 100vh;
width: 100%;

但是当你往下滑动的时候就会出现，下面的背景颜色并不是我们想要的红色

 

解决背景色问题代码在这里

我们只需要去设置高度100%，overflow: scroll;就可以了

background-color: red;
height: 100%;
overflow: scroll;

这样当你往下滑动的时候，下面的背景颜色就是我们想要的红色

当然解决问题的方法又很多种不局限与一种

第二种 在style下面再去创建一个style

page {
  background-color: #FFF;
}