当背景图像应延伸到整个页面长度时，页面右侧会显示空白[关闭]

110

我们的网页背景图片在FireFox以及iPad / iPhone上的iOS的Safari中存在问题，页面右侧显示空白。

背景图像在其他浏览器上可以很好地扩展，但是我们很难在这些浏览器上不扩展浏览器的整个长度。

快来看看我们的火狐网站，看看我的意思。

html css

— 戴夫
source

如果您使用的是引导程序或地基之类的框架，请检查now列是否是body的第一个子元素，但嵌套在另一个具有某种填充的div（较小的12fe）中。

— Lightningsoul

你解决了@Dave吗？

— gumuruh

疯了，不是吗。6年后，iOS Safari仍然显示此问题。我尝试了许多CSS解决方案，但最终不得不使用jQuery。 stackoverflow.com/a/45009357/391605

— Mike Gledhill，2017年

266

我补充说：

html,body
{
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
    overflow-x: hidden; 
}

放在其他类之上的CSS中，这似乎可以解决您的问题。

您可以在此处获取更新的.css文件

— 里恩·威廉姆斯
source

4

太棒了，这只是为我修复了一个困扰我一段时间的错误！

— gleddy 2011年

22

使用此代码在Safari苹果iphone上滚动时出现问题，它变得非常慢。我最终发现它是高度：100％和overflow-x：隐藏的组合，所以我删除了高度：100％，效果更好。

— 保罗·梅森

谢谢，这就像一个魅力。我一直想知道如何驾驭几乎无限的滚动条。不知道为什么没有将此标记为答案。

— isurfbecause因为

5

我发现bootstrap的'row'类给出了{margin-right：-15px}，这在我的页面上引起了这种情况。

— JosephK 2014年

2

就@JosephK而言，此问题通常是由于误用了Bootstrap的容器，行和列对象而引起的，它们使用填充和负边距完美地相互抵消，但是只有在正确使用时才能正确使用。否则会破裂！以我的经验，这是右侧空白的最常见原因之一。对于BRILLIANT，引导程序的容器，行，列的直观说明，包括对此问题和其他问题的讨论，请阅读以下内容（不，我没有写过）：helloerik.com/…–

— james

133

调试Ghost CSS元素的CSS。

使用此书签调试CSS：https : //blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

或者直接自己添加CSS：

* {
  background: #000 !important;
  color: #0f0 !important;
  outline: solid #f00 1px !important;
}

以我为例，Facebook的“赞”按钮引起了问题。

— 优化者
source

1

这确实派上了用场

— Josan Iracheta，2014年

6

出色的解决方案！这将帮助您找到问题的根源并正确解决，它只需要几行CSS。

— opdb

3

这应该是IMO接受的答案。我敢打赌，大多数人使用100vw作为宽度，结果得到了这个错误。简单地隐藏溢出是次佳的解决方案。

— 路加福音

这令人印象深刻，在那个令人难以置信的空白上花了2个小时，就解决了。

— 卡洛斯·罗索

哇，花了很多时间才找到了罪魁祸首，仅用了几行代码。谢谢队友:)

— Khpalwalk '16

55

在研究了此处提供的一些有用的策略之后，我发现只需要添加iOS特定的CSS（我将其放在主css表的底部即可。）似乎像隐藏了overflow-x是我的答案。我认为将宽度指定为100％会有助于我的内容变宽。应当指出，我在iOS中仅遇到此问题。如果在Firefox中也是如此，则可能仅应使用html和body块，因为@media是专门针对移动设备的。

@media
only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min--moz-device-pixel-ratio: 1.5),
only screen and (min-device-pixel-ratio: 1.5){

  html,
  body{
    width:100%;
    overflow-x:hidden;
  }

}

如果这对任何人来说都是不正确的，请hip我：)

— 乔恩·赖瑟
source

5

这是解决我问题的唯一方法

— JasonDavis 2013年

1

谢谢-最适合我的解决方案。也相当不

— 引人注目

这解决了问题，并且对于移动空白很有意义

— Rob Gleeson

应用后，在Safari iphone6s上滚动变得迟钝。我是否缺少移动Safari的其他属性以使其正常运行？

— Erik Rybalkin

对我来说最好的答案！

— Youssef Boudaya

28

这是一个很老的问题，但我想我要加2美分。我已经尝试了上述解决方案，包括ghost css，我肯定会保留下来以备将来使用。但是这些都不适合我的情况。这是我解决问题的方法。希望这会帮助其他人。

打开检查器（或您的首选项），并从body标签中的第一个div开始，display: none;仅添加到该元素。如果滚动条消失，则说明该元素包含引起问题的元素。然后，删除第一个css规则并将其下移到包含元素中。将css添加到该div中，如果滚动条消失，则说明该元素正在引起或包含有问题的元素。如果添加CSS并没有执行任何操作，则说明不是导致该问题的那个div，而是容器中的另一个div导致了该问题，或者容器本身导致了该问题。

对于某些人来说这可能太耗时。对我来说幸运的是，我的问题在页眉中，但是我可以想象如果您的问题在页脚或其他内容中花了一些时间。

— 连字号
source

这种方法帮助我找到了错误，谢谢

— Bill

是的，或者您可以逐个向下隐藏最高级别的div的dom，然后进入它们的内部..依此类推

— hatenine 2015年

当您拥有诸如height: 0或的怪异元素时，这实际上是成功解决根本问题的唯一方法height: 1。就我而言，我发现原因是在Drupal 7核心中出现了一个错误的“隐形”类：drupal.org/node/2664214

— geerlingguy

10

overflow-x: hidden; 对我来说很完美。

— 坎
source

5

问题出在文件中：

style.css-721行

#sub_footer {
    background: url("../images/exterior/sub_footer.png") repeat-x;
    background: -moz-linear-gradient(0% 100% 90deg,#102c40, #091925);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#091925), to(#102c40));
    -moz-box-shadow: 3px 3px 4px #999999;
    -webkit-box-shadow: 3px 3px 4px #999999;
    box-shadow: 3px 3px 4px #999999;
    padding-top:10px;
    font-size:9px;
    min-height:40px;
}

删除行：

-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;

这基本上只给页脚提供阴影渐变。在Firefox中，是导致问题的第一行。

— 最小
source

2

我也遇到了同样的问题（网站正文背景在iPhone Safari中呈现了正确的白色边距），并且发现将背景图像添加到<html>标签中可以解决此问题。

之前

body {background:url('images/back.jpg');}

后

html, body {background:url('images/back.jpg');}

— 哈维·埃斯特夫（Xavi Esteve）
source

2

显然（-o-min-device-pixel-ratio：3/2）引起了问题。在我的测试站点上，这导致右侧被切断。我在github上找到了一种暂时可行的解决方法。使用（-o-min-device-pixel-ratio：〜“ 3/2”）似乎可以正常工作。

— 陆荣
source

2

我看到这个问题已经按照一般标准回答了，但是当我查看您的站点时，我发现仍然存在一个水平滚动条。我也注意到了这个原因：您已经使用了代码：

.homepageconference .container {
padding-left: 12%;
}

该代码与说明元素的宽度为100％的代码一起使用，导致元素的总宽度为屏幕尺寸的112％。要解决此问题，请删除填充，将填充替换为12％的边距以达到相同的效果，或者将元素的宽度（或最大宽度）更改为88％。这发生在343行的main.css中。希望这会有所帮助！

— 河马·鲁斯勒
source

或者，将该box-sizing属性设置为border-box。

— 排

2

我遇到了同样的问题，所以尝试了一些事情。其中一种似乎对我有用-删除宽度并在body标签上添加浮点数。

可能不适用于所有实例，但是在我最近遇到的情况下，隐藏内容元素上的溢出是行不通的...

— 亮度设计
source

我必须将html，body设置为width：0才能消除Firefox顶部的ghost元素。

— Garavani

1

我在iPad上以及水平方向都经历了右侧的白线。我使用的固定位置div的背景设置为960px宽，z索引为-999。由于媒体查询，该特定的div仅显示在iPad上。然后将内容放入960px宽的div包装器中。此页面上提供的答案对我而言无济于事。为了解决白色条纹问题，我将内容包装的宽度更改为958px。Voilá。iPad在水平位置上不再有白色右白色条纹。

— 现代生活
source

1

这个问题已经存在了一段时间，但是我找不到能够解决的问题（ipad遇到了同样的问题），但是我管理了自己的解决方案，该解决方案应该对我想象中的大多数人都有效。

这是我的代码：

html {
   background: url("../images/blahblah.jpg") repeat-y;
   min-width: 100%;
   background-size: contain;
}

请享用！

— 麦可
source