Overflow-x：hidden不会阻止移动浏览器中的内容溢出
我在这里有一个网站。
在桌面浏览器中查看，黑色菜单栏正确地只延伸到窗口的边缘，因为body具有overflow-x:hidden 。
在任何移动浏览器中，无论是Android还是iOS，黑色菜单栏都会显示其全宽，这会在页面的右侧留下空白。 据我所知，这个空格甚至不是html或body标签的一部分。
即使我在<head>中将视口设置为特定的宽度：
<meta name="viewport" content="width=1100, initial-scale=1">
该网站扩大到1100px，但仍然有超过1100的空白。
我错过了什么？ 我如何保持视口1100，并切断溢出？
在body创build一个站点包装div，并将overflow-x:hidden到body或html的包装INSTEAD中解决了问题。
看来parsing<meta name="viewport">标记的浏览器只是忽略html和body标记的overflow属性。
VictorS对公认的答案的评论应该是自己的答案，因为这是一个非常优雅的解决scheme，确实有效。 我会添加一些有用的东西。
维克多注意到增加的position:fixed作品
body.modal-open { overflow: hidden; position: fixed; }
确实如此。 不过，它也有轻微的副作用，基本上滚动到顶部。 position:absolute解决了这个问题，但重新介绍了在移动设备上滚动的function。
如果你知道你的视口（ 我的插件添加视口到<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; }
尝试
html, body { overflow-x:hidden }
而不是仅仅
body { overflow-x:hidden }
body{ height: 100%; overflow: hidden !important; width: 100%; position: fixed;
适用于iOS9
正如@Indigenuity所述，这似乎是由浏览器parsing<meta name="viewport">标签引起的。
要从源头解决此问题，请尝试以下操作：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"> 。
在我的testing中，这可以防止用户缩小查看溢出的内容，并因此防止对其进行平移/滚动。
没有以前的单一解决scheme为我工作，我不得不混合他们，并得到修复老设备（iPhone 3）的问题。
首先，我必须将html内容包装到外部div中：
<html> <body> <div id="wrapper">... old html goes here ...</div> </body> </html>
然后，我不得不申请溢出隐藏到包装，因为溢出x不工作：
#wrapper { overflow: hidden; }
这就解决了这个问题。
保持视口不变： <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当然会将左边的菜单留在条的边缘，您可以将剩余的40px放置到每个li ，每边20px左右：
.menuitem { display: block; padding: 0px 20px; }
当你缩小浏览器的大小时，你会发现仍然是白色的背景：把你的背景纹理，而不是你的div到body 。 或者，也可以使用媒体查询将导航菜单宽度从100％调整为较低的值。 对你的代码进行了很多调整来创build一个合适的布局，我不知道你打算做什么，但上面的代码将以某种方式修复你的溢出吧。
在整个内容中添加一个包装器<div>确实可行。 虽然在语义上“icky”，我添加了一个类的overflowWrap正确的body标签，然后设置我的CSS像这样：
html, body, .overflowWrap { overflow-x: hidden; }
现在可能是过度杀伤，但作品像一个魅力！
我遇到了与Android设备相同的问题，但不是iOS设备。 通过在绝对定位的元素的外部div中指定position：relative来parsing（overflow：hidden为外部div）
这是解决Safari中的水平滚动的最简单的解决scheme。
html, body { position:relative; overflow-x:hidden; }
还有一个问题与身体和HTML设置显示：表;。 切换他们的显示块来修复它。
作为subarachnid说overflow-x隐藏的身体和HTML工作这里的工作示例
**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; }
链接
我通过使用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
在正文中创build一个站点包装div，并将overflow-> x：hidden应用到body或html的包装INSTEAD中，解决了这个问题。
这也适用于我添加position: relative对于包装。
我刚刚在这个工作了几个小时，试图从这个和其他网页的东西的各种组合。 对我来说最后的工作就是按照接受的答案build立一个站点包装div，但是将两个溢出设置为隐藏，而不是仅仅溢出。 如果我在滚动时离开overflow-y，最终会出现一个只能垂直滚动几个像素然后停止的页面。
#all-wrapper { overflow: hidden; }
就这样就足够了，不需要在body或html元素上设置任何东西。
解决这个问题的唯一方法是为我的引导模式（包含表单）添加下面的代码到我的CSS：
.modal { -webkit-overflow-scrolling: auto!important; }
