Html 当背景图像应扩展页面的全长时，页面右侧显示空白
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4617872/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
White space showing up on right side of page when background image should extend full length of page
提问by Dave
Our webpage background images are having problems in FireFox as well as Safari in iOS on iPads/iPhones with white space showing up on the right side of the page.
我们的网页背景图片在 iPad/iPhone 上的 FireFox 以及 iOS 中的 Safari 中存在问题，页面右侧显示空白。
The background images extend fine on other browsers but we're having difficulty not extending the full length of the browser on those browsers.
背景图像在其他浏览器上可以很好地扩展，但我们很难在这些浏览器上不扩展浏览器的全长。
Take a look at our site on FireFoxto see what I mean.
请查看我们在 FireFox 上的站点，了解我的意思。
回答by Rion Williams
I added:
我补充说：
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
into your CSS at the very top above the other classes and it seemed to fix your issue.
在其他类上方的最顶部放入您的 CSS，它似乎解决了您的问题。
回答by optimiertes
Debug your CSS for Ghost CSS Elements.
为 Ghost CSS 元素调试您的 CSS。
Use this bookmark to debug your CSS: https://blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
使用此书签调试您的 CSS：https: //blog.wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/
Or add the CSS directly yourself:
或者自己直接添加CSS：
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
In my case a Facebook Like Button caused the problem.
在我的情况下，Facebook Like Button 导致了这个问题。
回答by Jon Ryser
After exploring some of the helpful strategies provided here, I found that I only needed to add iOS specific CSS (I put it at the bottom of my main css sheet.) Seems like hiding the overflow-x was the answer for me. I assume that stating the width at 100% helps in the event that my content goes wide. It should be noted that I was only having this issue in iOS. If it is also in Firefox, just the html and body block should probably be used as the @media is specifically targeting mobile devices.
在探索了这里提供的一些有用的策略之后，我发现我只需要添加 iOS 特定的 CSS（我把它放在我的主 css 表的底部。）似乎隐藏溢出-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;
}
}
Please hip me if this seems incorrect to anyone :)
如果这对任何人来说都不正确，请告诉我:)
回答by hyphen
This is a pretty old question, but I thought I'd add my 2 cents. I've tried the above solutions, including the ghost css, which I will definitely be saving for future use. But none of these worked in my situation. Here's how I fixed my issue. Hopefully this will help someone else.
这是一个很老的问题，但我想我会加上我的 2 美分。我已经尝试了上述解决方案，包括ghost css，我肯定会保存以备将来使用。但是这些都不适用于我的情况。这是我解决问题的方法。希望这会帮助别人。
Open inspector (or whatever your preference) and starting with the first div in body tag, add display: none;to just that element. If the scroll bar disappears, you know that element contains the element that's causing the issue. Then, remove the first css rule and go down one level into the containing element. Add the css to that div, and if the scroll bar goes away, you know that element is either causing, or containing the offending element. If adding the CSS does nothing, you know it was not that div that caused the issue, and either another div in the container is causing it, or the container itself is causing it.
打开检查器（或任何您的偏好）并从 body 标签中的第一个 div 开始，添加display: none;到该元素。如果滚动条消失，您就知道该元素包含导致问题的元素。然后，删除第一个 css 规则并向下一层进入包含元素。将 css 添加到该 div，如果滚动条消失，您就知道该元素是导致或包含有问题的元素。如果添加 CSS 没有任何作用，您就知道不是那个 div 导致了问题，而是容器中的另一个 div 导致了它，或者容器本身导致了它。
This may be too time consuming for some. Lucky for me, my issue was in the header, but I can imagine this taking a bit of time if your issue was say, in the footer or something.
这对某些人来说可能太耗时了。幸运的是，我的问题出在页眉中，但我可以想象如果您的问题是在页脚或其他地方，这会花费一些时间。
回答by Hom
overflow-x: hidden;works perfect for me.
overflow-x: hidden;非常适合我。
回答by DMin
The problem is in the file :
问题出在文件中：
style.css - line 721
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;
}
remove the lines :
删除行：
-moz-box-shadow: 3px 3px 4px #999999;
-webkit-box-shadow: 3px 3px 4px #999999;
box-shadow: 3px 3px 4px #999999;
This basically gives a shadow gradient only to the footer. In Firefox, it is the first line that is causing the problem.
这基本上只为页脚提供阴影渐变。在 Firefox 中，它是导致问题的第一行。
回答by Xavi Esteve
I've also had the same issue ( Website body background rendering a right white margin in iPhone Safari) and found that adding the background image to the <html>tag fixed the problem.
我也遇到了同样的问题（网站正文背景在 iPhone Safari 中呈现右白边距）并发现将背景图像添加到<html>标签解决了这个问题。
Before
前
body {background:url('images/back.jpg');}
After
后
html, body {background:url('images/back.jpg');}
回答by Lu R.
Apparently the (-o-min-device-pixel-ratio: 3/2) is causing problems. On my test site it was causing the right side to be cut off. I found a workaround on githubthat works for now. Using(-o-min-device-pixel-ratio: ~"3/2") seems to work fine.
显然 (-o-min-device-pixel-ratio: 3/2) 引起了问题。在我的测试站点上，它导致右侧被切断。我在github上找到了一个目前有效的解决方法。使用(-o-min-device-pixel-ratio: ~"3/2") 似乎工作正常。
回答by HippoRustler
I see the question has been answered to a general standard, but when I looked at your site I noticed there is still a horizontal scroll-bar. I also notice the reason for this: You have used the code:
我看到这个问题已经得到了一般标准的回答，但是当我查看您的网站时，我注意到仍然有一个水平滚动条。我也注意到这样做的原因：您使用了以下代码：
.homepageconference .container {
padding-left: 12%;
}
which is being used alongside code stating that the element has a width of 100%, causing an element with a total width of 112% of screen size. To fix this, either remove the padding, replace the padding with a margin of 12% for the same effect, or change the width (or max-width) of the element to 88%. This occurs in main.css at line 343. Hope this helps!
它与说明元素宽度为 100% 的代码一起使用，导致元素总宽度为屏幕大小的 112%。要解决此问题，请移除内边距，用 12% 的边距替换内边距以获得相同的效果，或者将元素的宽度（或最大宽度）更改为 88%。这发生在 main.css 的第 343 行。希望这会有所帮助！
回答by luminancedesign
I had the same issue, so tried a few things. One of which seemed to work for me - removing the width and adding a float to the body tag.
我有同样的问题，所以尝试了一些事情。其中一个似乎对我有用 - 删除宽度并在 body 标签中添加一个浮点数。
May not work for all instances, but in the scenario I recently had, hiding overflow on content elements was a no go...
可能不适用于所有实例，但在我最近遇到的情况下，隐藏内容元素的溢出是行不通的......
