1

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

这是我的 CSS body：

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

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

这是一个屏幕截图：

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

也许这是 Android 版 Chrome 的错误？

4

2 回答 2

1

正如评论中所建议的，问题是明确设置height: 100%在 上的body，这使得它坚持视口高度。

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

于 2013-08-08T16:57:06.717 回答
0

切换到 min-height: 100% for body 和 html 应该会给你同样的效果。

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

于 2013-08-08T08:57:07.620 回答