移動設備底部的空白，無法在 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