移动端滚动时浏览器底部出现空白背景问题求助

问题描述 #

桌面端浏览器（含移动端调试模式）页面显示正常，但在Chromium 119.0移动端浏览器中滚动页面时，顶部地址栏自动隐藏，页面底部出现空白区域。

文件结构 #

|--assests
   |--bg-img.png
|--index.html
|--styles.css

原代码 #

index.html #

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>bg-css-help</title>
  </head>
  <body></body>
</html>

styles.css #

body {
  background-image: url("./assests/bg-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 100vh;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  body {
    background-attachment: scroll;
  }
}

已尝试的无效方法 #

• 将body的min-height单位从vh改为svh、lvh；
• 新建div并设置相同背景，添加width:100%和height:100vh。

解决方案 #

方案1：适配动态视口并保留固定背景 #

修改styles.css，针对移动端调整视口单位和背景附着方式：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background-image: url("./assests/bg-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  min-height: 100vh;
  background-attachment: fixed;
}

@media (max-width: 768px) {
  body {
    background-attachment: fixed; /* 取消改为scroll的设置，fixed模式会跟随视口变化 */
    min-height: 100dvh; /* 使用动态视口高度适配地址栏切换 */
  }
}

方案2：使用固定定位的全屏背景容器 #

如果方案1无效，尝试用独立容器承载背景：

1. 更新index.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
    <link rel="stylesheet" href="styles.css" />
    <title>bg-css-help</title>
  </head>
  <body>
    <div class="fullscreen-bg"></div>
  </body>
</html>

2. 更新styles.css：

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow-x: hidden;
}

.fullscreen-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100dvh;
  background-image: url("./assests/bg-img.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  z-index: -1;
}

方案说明 #

• dvh是动态视口高度单位，会实时适配浏览器地址栏显示/隐藏后的视口尺寸，比svh/lvh更适配动态场景；
• 保留background-attachment: fixed可让背景图自动跟随视口高度调整，避免滚动时出现空白；
• viewport-fit=cover确保页面覆盖整个设备视口，适配刘海屏等特殊屏幕；
• 固定定位的背景容器脱离文档流，始终覆盖当前视口，彻底解决视口变化导致的空白问题。

内容的提问来源于stack exchange，提问作者Tajpuriya