我试过了，但只有当屏幕在垂直滚动条出现之前，然后向下滚动时背景颜色变回白色时，它才有效。
.background {
min-height: 100vh;
width: 100vw;
position: absolute;
top: 0;
z-index: -9999;
background-color: red;
}<div class="background"></div>问题是默认情况下body有填充。
"Manjuboyz"解决方案在一定程度上有效，但全球应用的风格可能会在未来引发问题。
这个片段将通过删除默认的正文填充来修复它：
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
padding:0;
margin: 0;
}
.background {
min-height: 100vh;
width: 100vw;
position: absolute;
top: 0;
z-index: -9999;
background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<div class="background"></div>
</body>
</html>但是，如果页面太长，则需要position: fixed属性，这可以通过将div"固定"到可见的可查看屏幕来确保div将跟随其设备上的渲染视图区域。W3有一些很好的例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
body{
padding:0;
margin: 0;
}
.background {
min-height: 100vh;
width: 100vw;
position: fixed;
top: 0;
z-index: -9999;
background-color: red;
}
</style>
<script>
</script>
</head>
<body>
<div class="background"></div>
</body>
</html>