Android Chrome 对背景属性表现不佳答案

【问题标题】：Android Chrome behaving badly with background propertyAndroid Chrome 对背景属性表现不佳
【发布时间】：2013-08-09 00:57:06
【问题描述】：

我正在开发个人网站，但在 Android 上使用 Chrome 时遇到了一些问题。我有一个覆盖所有页面的背景图片，它在我拥有的每个浏览器（Chrome、Opera、Safari、Firefox）和在我拥有的每个移动浏览器（iOS 上的 Chrome、Safari 上iOS，甚至是默认的 Android 浏览器）。

这是我的body 的 CSS：

body {
    width: 100%;
    height: 100%;
    background: url(../images/background.jpg) no-repeat center center fixed;
    background-size: cover;
}

在 Chrome for Android 上发生的情况是，背景仅覆盖可用的视口（首屏），而在首屏下方消失。

截图如下：

使用 body 而不是更经典的包装器 #container div 会不会有问题？我真的很想解决这个问题，而不必弄乱我的标记；我相信这是可能的，因为它确实适用于大多数浏览器。

可能是 Chrome for Android 的错误？

【问题讨论】：

我只是猜测，但可能是因为您明确设置了 body 的高度和宽度，请尝试删除这些线条。
是的，就是这样。谢谢！

标签： android css google-chrome

【解决方案1】：

正如 cmets 中所建议的，问题在于在 body 上显式设置 height: 100%，这使其坚持视口高度。

通过删除该约束，现在背景扩展到所有内容。

【讨论】：

【解决方案2】：

切换到最小高度：body 和 html 为 100% 应该会给您同样的效果。

否则您能否提供一个示例 URL 或 jsbin.com 的代码示例

【讨论】：

不，对不起。不是这样，但上面的评论解决了这个问题。还是谢谢你！