我嘗試了這個，但它僅在屏幕位于垂直滾動條出現(xiàn)之前才有效，然后當您向下滾動時背景顏色又回到白色。.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 通過將其“固定”到可見的可查看屏幕來遵循其設備上的渲染視圖區(qū)域。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 關注
- 173 瀏覽
添加回答
舉報
0/150
提交
取消