我在这里有一个网站。
在桌面浏览器中查看时，黑色菜单栏正确地延伸到窗口的边缘，因为body具有overflow-x:hidden。
在任何移动浏览器中，无论是Android还是iOS，黑色菜单栏都会显示其完整宽度，从而在页面右侧显示空格。据我所知，该空格甚至不是htmlor body标记的一部分。
即使我在中将视口设置为特定的宽度<head>：
<meta name="viewport" content="width=1100, initial-scale=1">该站点扩展到1100像素，但仍然有1100以外的空白。
我想念什么？如何将视口保持在1100并切断溢出？
Answers:
创建内部的一个网站包装DIV <body>并应用overflow-x:hidden到包装，而不是<body>或<html>固定的问题。
看来，解析<meta name="viewport">标记的浏览器只是忽略overflow了html和body标记上的属性。
注意：您可能还需要添加position: relative到包装div中。
overflow为之外hidden，我还必须将设置position为fixed...
overflow-x: hidden即使添加了此meta标签，@ leepowers 仍然对我不起作用。您能否分享一个指向您正在运行的网站的链接？
position:relative。
尝试
html, body {
overflow-x:hidden
}
而不只是
body {
overflow-x:hidden
}
overflow任何东西应用到html和/或body以任何组合的方式都不能解决问题。
height:100%;，否则垂直滚动在加载图像的页面上将无法正常工作（这会使页面高度增加）。
VictorS对接受的答案的评论应该是它自己的答案，因为它是一个确实有效的非常优雅的解决方案。而且我会添加一点点实用性。
维克多（Victor）注意到正在添加position:fixed作品。
body.modal-open {
overflow: hidden;
position: fixed;
}
确实如此。但是，它也具有基本滚动到顶部的轻微副作用。position:absolute解决了此问题，但重新引入了在移动设备上滚动的功能。
如果您知道您的视口（我的插件将视口添加到<body>），您只需添加一个CSS切换器position。
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
我还添加了此选项，以防止显示/隐藏模式时基础页面向左/向右跳转。
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
position:fixed or absolute干扰他们的位置。不适合我/在我的情况下工作:(
这是解决Safari中水平滚动的最简单解决方案。
html, body {
position:relative;
overflow-x:hidden;
}
table-responsive错误。这就是解决方案。
如@Indigenuity所述，这似乎是由浏览器解析<meta name="viewport">标记引起的。
要从源头解决此问题，请尝试以下操作：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">。
在我的测试中，这阻止用户缩小以查看溢出的内容，因此也防止平移/滚动到该内容。
initial-scale=1到现有的视口元标记确实可以解决该问题。谢谢！
minimum-scale=1固定的问题
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;适用于iOS9
保持视口不变： <meta name="viewport" content="width=device-width, initial-scale=1.0">
假设您希望在右侧获得连续的黑条效果：#menubar不应超过100％，调整边框半径以使右侧为正方形，并调整填充以使其向右侧延伸一些。将以下内容修改为#menubar：
border-radius: 30px 0px 0px 30px;
width: 100%; /*setting to 100% would leave a little space to the right */
padding: 0px 0px 0px 10px; /*fills the little gap*/调整padding到课程叶子10px的左边菜单栏的边缘，你可以把剩下的40像素到每个li，20像素每边左，右：
.menuitem {
display: block;
padding: 0px 20px;
}将浏览器调整为较小尺寸时，您仍然会发现白色背景：将背景纹理从div放到body。或者，使用媒体查询将导航菜单的宽度从100％调整为较低的值。要对代码进行大量调整以创建适当的布局，我不确定您打算做什么，但是上面的代码将以某种方式解决溢出的问题。
box-sizing: border-box;，则可以将填充添加到100％宽度的div中。
没有以前的单一解决方案对我有用，我不得不将它们混合使用，并在较旧的设备（iPhone 3）上也解决了该问题。
首先，我必须将html内容包装到外部div中：
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>然后我不得不将隐藏的溢出应用到包装器，因为overflow-x无法正常工作：
#wrapper {
overflow: hidden;
}这解决了这个问题。
我通过使用overflow-x：hidden;解决了这个问题。如下
@media screen and (max-width: 441px){
#end_screen { (NOte:-the end_screen is the wrapper div for all other div's inside it.)
overflow-x: hidden;
}
}结构如下
1st div end_screen >> inside it >> end_screen_2(div) >> inside it >> end_screen_2.
'end_screen is the wrapper of end_screen_1 and end_screen_2 div's
正如subarachnid所说的，对于主体和html都隐藏了溢出-x，这是工作示例
**HTML**
<div class="contener">
<div class="menu">
das
</div>
<div class="hover">
<div class="img1">
First Strip
</div>
<div class="img2">
Second Strip
</div>
</div>
</div>
<div class="baner">
dsa
</div>
**CSS**
body, html{
overflow-x:hidden;
}
body{
margin:0;
}
.contener{
width:100vw;
}
.baner{
background-image: url("http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
width:100vw;
height:400px;
margin-left:0;
left:0;
}
.contener{
height:100px;
}
.menu{
display:flex;
background-color:teal;
height:100%;
justify-content:flex-end;
align:content:bottom;
}
.img1{
width:150px;
height:25px;
transform:rotate(45deg);
background-color:red;
position:absolute;
top:40px;
right:-50px;
line-height:25px;
padding:0 20px;
cursor:pointer;
color:white;
text-align:center;
transition:all 0.4s;
}
.img2{
width:190px;
text-align:center;
transform:rotate(45deg);
background-color:#333;
position:absolute;
height:25px;
line-height:25px;
top:55px;
right:-50px;
padding:0 20px;
cursor:pointer;
color:white;
transition:all 0.4s;
}
.hover{
overflow:hidden;
}
.hover:hover .img1{
background-color:#333;
transition:all 0.4s;
}
.hover:hover .img2{
background-color:blue;
transition:all 0.4s;
}