Html 无法摆脱我网站上的水平滚动条
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3855854/
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
can't get rid of the horizontal scrollbar on my site
提问by Omu
(obsolete live link removed)
（已删除过时的实时链接）
I have horizontal scrollbar which doesn't really makes sense. Does anyone know how to get rid of it?
我有水平滚动条，这真的没有意义。有谁知道如何摆脱它？
回答by SLaks
Remove width:100%from your three main elements.
width:100%从您的三个主要元素中删除。
By adding width: 100%, you force the client area of each element to fill the browser.
Since the elements' borders add an additional pixel on each side, you end up with a scrollbar.
通过添加width: 100%，您可以强制每个元素的客户区填满浏览器。
由于元素的边框在每一侧添加了一个额外的像素，因此您最终会得到一个滚动条。
回答by jimplode
Make your content fit in the window.
使您的内容适合窗口。
or
或者
<body scroll="no" style="overflow: hidden">
<body scroll="no" style="overflow: hidden">
回答by Paul Hadfield
It is your 1px border. You have set the main elements widths to 100% then added a 1px border around the objects
这是你的 1px 边框。您已将主要元素宽度设置为 100%，然后在对象周围添加了 1px 边框
回答by Alin Purcaru
The #top-wrapperelement has 100% width and 1px border (left and right) that sums to a total of 100% + 2px (2px more that there is available) so a scroll-bar appears. The recommended solution (not a workaround!) is not to add width:100%;for elements that you want to occupy the whole width of their respective parents, but let the browser take care of that.
该#top-wrapper元素具有 100% 的宽度和 1px 的边框（左右），总计为 100% + 2px（可用的 2px），因此会出现滚动条。推荐的解决方案（不是解决方法！）不是为width:100%;您想要占据其各自父项的整个宽度的元素添加，而是让浏览器来处理。
Floating boxes are an exception to this recommendation and they need to be handled differently. For more information you can look here http://www.w3.org/TR/CSS2/box.html
浮动框是此建议的一个例外，它们需要以不同的方式处理。有关更多信息，您可以在这里查看http://www.w3.org/TR/CSS2/box.html
Hope this answers your question, Alin
希望这能回答你的问题，阿林
回答by Timo
In my case, it was a small <div>with a relative position of left: 690pxthat made the browsers add horizontal spacing (and the scrollbar).
在我的例子中，它<div>的相对位置很小，left: 690px这使得浏览器增加了水平间距（和滚动条）。
#feedbackButton {
position: relative;
height: 0;
top: -46px;
left: 790px;
}
I changed this to float: leftand the issue was resolved.
我将其更改为float: left并解决了问题。
回答by VikasGaurav
<body style="overflow-x: hidden;">
<body style="overflow-x: hidden;">
It is enough. You can just use
就够了。你可以使用
overflow-x: hidden;
overflow-x: hidden;
on the body tag.
在身体标签上。
回答by Roshan Jafri
what simply worked for me was
对我有用的是
body {
overflow-y:hidden;
}
hope it works!
希望它有效！
回答by Muhamed Gaber Abdeen
The default behavior of box-sizingis content-boxso if you set an element's width to 100%, then the element's content box will be 100%pixels wide, and the width of any border or padding will be added to the final rendered width, making the element wider than 100%.
的默认行为box-sizing是content-box，如果您将元素的宽度设置为100%，则元素的内容框将为100%像素宽，并且任何边框或填充的宽度都将添加到最终呈现的宽度中，从而使元素宽度大于100%。
you can change this behavior by changing box-sizingto border-boxas follows:
你可以通过改变改变这种行为box-sizing，以border-box如下：
selector { box-sizing: border-box;}
selector { box-sizing: border-box;}
border-box tells the browser to account for any border and padding in the values you specify for an element's width and height, the content box will shrink to absorb that extra width.
border-box 告诉浏览器考虑您为元素的宽度和高度指定的值中的任何边框和填充，内容框将缩小以吸收额外的宽度。
you can check out MDN documentation about box-sizing
你可以查看 关于 box-sizing 的 MDN 文档
回答by anactualhuman_
this should work
这应该有效
<body scroll="no" style="overflow-x: hidden">
