CSS 响应式网站：如何去掉水平滚动条？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18645870/
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
Responsive website: How to get rid of horizontal scroll bar?
提问by user1717475
I am currently creating a responsive website. I noticed there is an issue with empty space on the right as you scrolling horizontally. I can remove the horizontal scroll by adding overflow-x: hidden. But it will not work on mobile devices such as iPhone and iPad.
我目前正在创建一个响应式网站。我注意到当您水平滚动时，右侧的空白区域存在问题。我可以通过添加overflow-x: hidden. 但它不适用于 iPhone 和 iPad 等移动设备。
So, I tried to add min-widthbecause it will help to get rid of empty space. But I can't put min-widthon full.css (e.g. min-width:1000px;) because it will set to full-width - see example below:
所以，我尝试添加，min-width因为它有助于摆脱空白。但是我不能min-width使用 full.css (eg min-width:1000px;)，因为它会设置为全角 - 请参见下面的示例：
full.css
完整的.css
#wrapper {
width: 1000px;
margin: 0 auto;
}
responsive.css (less than 1000px)
response.css（小于 1000px）
#wrapper {
width: 100%;
margin: 0;
}
I was wondering if you know how to fix this issue? Let me know if you have a better option for it. Or should I create a new wrapper id?
我想知道你是否知道如何解决这个问题？如果您有更好的选择，请告诉我。或者我应该创建一个新的包装器 ID？
采纳答案by iMarkDesigns
Referring to your issue, the code appears to be correct. However, some elements inside might also affect the exact width and overflow your boundary. Might check all inside elements as well. You can use Firebug or Chrome Inspect Element.
参考您的问题，代码似乎是正确的。但是，内部的某些元素也可能会影响确切的宽度并溢出您的边界。也可能检查所有内部元素。您可以使用 Firebug 或 Chrome Inspect Element。
回答by Jonathan
Every now and then I have this problem, and a big part of solving the problem is identifying the element that's the culprit. I just came up with this little jQuery script you can run in your browser's JavaScript console to find which elements are wider than the body width, causing that annoying scrollbar to appear.
我时不时会遇到这个问题，解决问题的很大一部分是确定罪魁祸首的元素。我刚刚想出了这个小 jQuery 脚本，您可以在浏览器的 JavaScript 控制台中运行它来查找哪些元素比主体宽度更宽，从而导致出现烦人的滚动条。
$.each( $('*'), function() {
if( $(this).width() > $('body').width()) {
console.log("Wide Element: ", $(this), "Width: ", $(this).width());
}
});回答by Amin.Che
You Can hide the horizontal overflow using css code (and then the horizontal scroll bar will never show up again):
您可以使用 css 代码隐藏水平溢出（然后水平滚动条将不再出现）：
body{
overflow-x:hidden;
}
回答by VertigoSFX
Link to the page? Chances are there is some kind of element inside the wrapper that is breaking past the browser window.
链接到页面？包装器内部可能有某种元素正在突破浏览器窗口。
Often times it is with padding and widths. Keep in mind if you have an element inside the wrapper that is set to say 100% width and you add padding on the left and right of 20px. It will create a horizontal scrollbar because the element is 100% + 40 px.
很多时候它与填充和宽度有关。请记住，如果您在包装器内有一个设置为 100% 宽度的元素，并且您在 20px 的左侧和右侧添加了填充。它将创建一个水平滚动条，因为元素是 100% + 40 px。
So if you are building liquid elements inside a div you would do it like this:
因此，如果您在 div 中构建液体元素，您可以这样做：
#liquidelement {
width:96%;
padding:0 2%;
}
You need to subtract the padding from the widths, also always use percentages for the padding when doing layouts because it's fluid, not fixed.
您需要从宽度中减去填充，在进行布局时也总是使用填充百分比，因为它是流动的，而不是固定的。
回答by Thato Sello
No more than three steps are required here:
这里不需要超过三个步骤：
- Scroll the horizontal bar to the right where you can see the extra empty padding.
- Open an Inspect Element
- 将水平栏向右滚动，您可以看到额外的空白填充。
- 打开一个检查元素
This is done by holding
ctrl + shiftthen pressingi
这是通过按住
ctrl + shift然后按下来完成的i
- Scroll over all your elements, the element with the extra padding should protrude your pages content into that empty space created.
- 滚动所有元素，具有额外填充的元素应将页面内容突出到创建的空白空间中。
