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

Question

我知道这方面有各种类似的主题，但没有一个回答我的问题。 请看这个最简单的 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>

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

Answer 1

对不起，我的英语不太好。 无论如何，我试图解释我是如何解决这个问题的。

首先不要把身体放在高度上：100vh，但是 100%！

第二：不要将背景图像包含在正文中，而是在自己的标签中。 拿 img 标签并把你的背景图像放在那里。 将背景 img 放入后，您必须将此标签的高度设置为 100vh，（我发现 vh 比 % 大一点。所以带有 vh 的背景将覆盖由于滚动导航栏而导致的白色底部：）例如：

html,body{height: 100%;} img{ height: 100vh; 背景：任何背景； z-索引：-1； 背景尺寸：封面； ETC。 }

您会看到您的问题将得到解决。

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

问题描述

1 个解决方案

解决方案1
0 2021-11-28 16:19:27

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

问题描述

1 个解决方案

解决方案1 0 2021-11-28 16:19:27

解决方案1
0 2021-11-28 16:19:27