我尝试了这个，但它仅在屏幕位于垂直滚动条出现之前才有效，然后当您向下滚动时背景颜色又回到白色。.background { min-height: 100vh; width: 100vw; position: absolute; top: 0; z-index: -9999; background-color: red;}<div class="background"></div>
1 回答
有只小跳蛙
TA贡献1824条经验 获得超8个赞
问题是默认情况下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 通过将其“固定”到可见的可查看屏幕来遵循其设备上的渲染视图区域。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>
- 1 回答
- 0 关注
- 86 浏览
添加回答
举报
0/150
提交
取消