即使移动浏览器改变它的滚动高度，如何填充网站背景？答案

【问题标题】：How to fill background of website even when a mobile browser alters it's height on scroll?即使移动浏览器改变它的滚动高度，如何填充网站背景？
【发布时间】：2017-07-14 18:19:38
【问题描述】：

我有一个我正在尝试设计的网站。我用一个占屏幕高度 100% 的图像填充了背景。在计算机上，这可以完美运行，但在移动设备上，加载时只占用 100% 的可用网页空间，其中包括顶部的浏览器 URL 栏。当您向下滚动时，网址栏会消失，在网站背景的底部留下一个空隙。

该网站是一个单一的网页网站。加载时的“主页”/初始视图淡入背景图像。我希望实际内容在加载时就在屏幕外，因此背景图片恰好占屏幕高度的 100%。

我该如何解决这个问题？

以下是我如何填充相关网站的背景和屏幕截图。

我使用以下 CSS 代码填充了网站的背景。

html{
    background: url(../content/BackgroundAndHand03.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
    opacity: 1;
}

Website with mobile browser URL bar

Website without mobile browser URL bar

【问题讨论】：

标签： android html css image background-image

【解决方案1】：

这可以防止滚动越过html 元素，并允许您的body 在移动设备上过度滚动期间保持其位置，因此即使设备支持过度滚动，html 也会锁定为所需的颜色或body 移动时的图像。

html {
    overflow: hidden;
    height: 100%;
}

body {
    height: 100%;
    overflow: auto;
}

如果您还没有添加此 meta 标签，请确保包含此标签

<meta name="viewport" content="width=device-width, initial-scale=1.0">

【讨论】：

我发现这对我不起作用。它不能修复背景图像底部的间隙。溢出控制锁定了我网页的内容，即使 html 是设置为隐藏的并且 body 设置为 auto。