Question

这个CSS让我的背景在iOS中填充100％的屏幕高度但是有一个小问题 - 当你向下滚动时，最初是空白区域，然后当你松开手指并停止滚动背景图像时＃34 ;调整＆＃34;并再次填充屏幕高度的100％。如果您是第一次继续滚动，则问题不会在同一页面上重新出现。有人可以帮忙吗？感谢

#background {
  background: url(../img/background.jpg) center repeat-x;
  position: fixed;
  background-size: auto 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1
}

Answer 1

这是因为您的#background元素设置为“跟随”窗口的高度：

#background {
    ...
    position: fixed;
    top: 0;
    bottom: 0;
    ...
}

但是，当您第一次从window向460px向下滚动内容时，Safari中的529px会更改其大小：

enter image description here

从这些屏幕截图中可以看出，当加载网页时，window.innerHeight等于460px（在iPhone5上）。然后，当您的手指触摸屏幕时开始向下滚动页面时，window.innerHeight会增加到529px，但内容尚未更新。只有当手指从屏幕上释放时，#background元素才会更新，其新窗口高度等于529px。

要解决此问题，您应确保#background元素高于初始窗口高度529-460 = 69px。或者#background元素的常量高度为529px（或更高）：

#background {
    ...
    position: fixed;
    top: 0;
    bottom: -69px;
    ...
}

OR

#background {
    ...
    position: fixed;
    top: 0;
    /* use height instead of bottom */
    height: 529px;
    ...
}

以下是修复此问题的最终代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Fixed background</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="css/styles.css?v=1.0">
        <style>
            #background {
                background: url(bkgd.png) repeat;
                position: fixed;
                background-size: 100% auto;
                top: 0;
                left: 0;
                right: 0;
                bottom: -69px;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <div id="background"></div>
        <div style="height: 5000px;"></div>
    </body>
</html>

Answer 2

我刚刚解决了这个问题。对我来说问题是，当我的身体标签带有背景图像时，空白显示，背景大小设置为覆盖。为了解决这个问题，我设置了：

background-size: 100vw 100vh;

然后将我遇到问题的媒体查询设置为

{background-size: cover;}

Answer 3

尝试在背景上使用视口单元

background-size: 100vw 100vh;

但首先将视口元标记添加到您的网页：

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

注意：

不完全支持vw和vh单位，请查看支持的浏览器here。

Answer 4

为什么不使用background-size：cover。这样，背景图像将始终填充其附加的div或body标记

Answer 5

<name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0," />

体{ background-size：cover;

}

Answer 6

您可以通过使用长转换延迟来解决此问题，以防止元素调整大小。

例如：

transition: height 250ms 600s; /*10min delay*/

与此相关的是它会阻止元素的大小调整，包括在设备上旋转，但是如果这是一个问题，你可以使用一些JS来检测方向变化并重置高度。

Answer 7

html, body {
    display: block;
    height:  100%;
    width:   100%;
}

body {
    background-image:      url('some/image.jpg');
    background-repeat:     repeat-x;
    background-attachment: fixed;
    background-position:   center center;
    background-size:       contain;
}

jsfiddle

CSS背景延伸以填充iOS中的高度，但滚动时有空白区域

7 个答案: