移动设备底部的空白，无法在 Chrome 模拟器中重现答案

【问题标题】：White space at bottom on mobile, not reproducible in Chrome simulator移动设备底部的空白，无法在 Chrome 模拟器中重现
【发布时间】：2021-05-29 02:38:42
【问题描述】：

我知道这方面有各种类似的主题，但没有一个回答我的问题。请看这个最简单的 HTML 代码。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <style>
  html, body {
    margin: 0;
    height: 100%;
    background: linear-gradient(to top, blue, white);
    background-attachment: fixed;
  }
  </style>
 </head>
 <body>
 </body>
</html>

在 Chrome for PC 中查看（在普通视图或移动模拟器视图中）它会产生覆盖整个屏幕的渐变背景。在适用于 Android 的 Firefox 移动版或 Chrome 移动版中查看，该网站在地址栏的底部有一个空白区域。它要么立即出现，要么在您尝试滚动页面时出现。为什么它会在那里，我该如何摆脱它？

【问题讨论】：

标签： android html css mobile

【解决方案1】：

直到几个小时前我都遇到了同样的问题。

设置 body-height 不是 100vh，而是 100%。正文，html{填充：0；边距：0；高度：100%； }（这里没有背景输入！）

在您的 html 文档中，您必须放入一个新的 image-Tag('')

在 CSS 的末尾：

#image{ 高度：100vh;背景图片：网址（..）； z-索引：-1；背景尺寸：封面； }

所以我发现，实际上 100% 小于 100vh，实际上是在滚动导航栏时杀死了 android 浏览器底部的白条。对不起我的英语不好。来自德国的问候。 xD

【讨论】：