移动android设备上的CSS背景图像全屏并不完美答案

【问题标题】：CSS Background Image full screen on mobile android devices not perfect移动android设备上的CSS背景图像全屏并不完美
【发布时间】：2020-03-12 16:57:18
【问题描述】：

哇。使用 HTML 和 CSS 创建全屏背景图像有多难？好像还蛮难的。至少，互联网上充满了 css perfect full screen image background 和 https://css-tricks.com/perfect-full-page-background-image/ 这样的答案。

事实上，第二个链接的演示也适用于移动android设备：https://css-tricks.com/examples/FullPageBackgroundImage/progressive.php

但我仍然没有运气。我复制了样式

html {
    background: url(/images/snowback.png) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

对于我的样式表https://aoc-2019.netlify.com/css/retro.css，背景图像仍然不完美：https://aoc-2019.netlify.com

起初看起来很完美，但是当你滚动一点时，Android浏览器会隐藏地址栏，然后背景不会调整大小。这会导致页面底部的区域未被背景图像覆盖。

正如我所说，上面的演示效果很好。

我的页面和演示有什么区别？有什么想法吗？

【问题讨论】：

标签： android html css background-image

【解决方案1】：

页面的结构有几个不同之处。长话短说，阻止它按预期工作的主要因素是将 height: 100% 分配给 HTML 元素。正如您可以在此处阅读的directly from Google's developers website，分配 height: 100% 为元素提供了显示栏时可用的高度，并且一旦隐藏就不会调整大小。如果您不想修改和更改代码并需要快速解决方案，只需在 HTML 中添加 110% 的高度即可获得与比较链接中相同的效果。

【讨论】：

太棒了！感谢对谷歌网站的引用。所以，我没有想到的是我还应用了其他样式表。一个已经设置了body {height 100%;}，但它必须是auto :-)

【解决方案2】：

我可以轻松发现的差异是......

CSS-Tricks 版本：html 和 body 没有高度或最小高度。

您的版本：html 和 body 的高度和最小高度都设置为 100%。

CSS-Tricks 版本：正文设置为 overflow-x: hidden;

您的版本：正文没有溢出规则。

我建议您准确复制他们所做的，不添加任何内容，确保它按预期工作。然后在您的网站中重新创建它。

如果事实证明 100% 的高度和最小高度是问题所在，但您需要这些作为粘性页脚或其他东西。然后，您可以使用辅助包装 div 来促进您的粘性页脚。就像将高度/最小高度规则放在一个完整的包装器 div 上，然后在其中使用带有粘性页脚的页面包装器。

【讨论】：

谢谢。是height: 100%，必须是auto！