Question

我有一个网站here。

在桌面浏览器中查看，黑色菜单栏只能正确延伸到窗口边缘，因为body有overflow-x:hidden。

在任何移动浏览器中，无论是Android还是iOS，黑色菜单栏都会显示其全宽，这会在页面右侧显示空白区域。据我所知，这个空格甚至不是html或body标签的一部分。

即使我将视口设置为<head>：

中的特定宽度

<meta name="viewport" content="width=1100, initial-scale=1">

该网站扩展到1100px，但仍然有超过1100的空白。

我错过了什么？如何将视口保持为1100并切断溢出？

Answer 1

在body内创建网站包装器div，并将overflow-x:hidden应用于body或html的包装器INSTEAD，解决了问题。

解析<meta name="viewport">标记的浏览器似乎只会忽略overflow和html标记上的body属性。

Answer 2

试

html, body {
  overflow-x:hidden 
}

而不仅仅是

body {
  overflow-x:hidden 
}

Answer 3

VictorS对accepted answer的评论应该是它自己的答案，因为它是一个非常优雅的解决方案，确实有效。而且我会添加一点它的用处。

Victor注意到添加position:fixed作品。

body.modal-open {
    overflow: hidden;
    position: fixed;
}

确实如此。然而，它也有一个轻微的副作用，基本上滚动到顶部。 position:absolute解决了这个问题，但重新介绍了在移动设备上滚动的功能。

如果您知道自己的视口（my plugin for adding viewport to the <body>），则可以为position添加css切换。

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;
}

Answer 4

这是在Safari中解决水平滚动的最简单的解决方案。

html, body {
  position:relative;
  overflow-x:hidden;
}

Answer 5

body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;

适用于iOS9

Answer 6

正如@Indigenuity所述，这似乎是由浏览器解析data = np.genfromtxt("/home/rex/Documents/ModLab/PhotoElec/Exp2Data.csv", delimiter=',', unpack=True, names=True, skip_header = 1) # skip_header let to go directly to your data and pass the header标记引起的。

要在源头解决此问题，请尝试以下操作：

<meta name="viewport">。

在我的测试中，这可以防止用户缩小以查看溢出的内容，因此也可以防止平移/滚动它。

Answer 7

之前没有单一解决方案适用于我，我不得不将它们混合在一起，并在旧设备（iphone 3）上解决问题。

首先，我必须将html内容包装到外部div中：

<html>
  <body>
    <div id="wrapper">... old html goes here ...</div>
  </body>
</html>

然后我不得不将溢出应用于包装器，因为overflow-x无效：

  #wrapper {
    overflow: hidden;
  }

这解决了这个问题。

Answer 8

保持视口不变：<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％调整到较低值。您需要对代码进行大量调整才能创建正确的布局，我不确定您打算做什么，但上面的代码会以某种方式修复您的溢出条。

Answer 9

在整个内容周围添加包装<div>确实有用。虽然语义上是“icky”，但我在body标签内添加了一个带有overflowWrap类的div，然后像这样设置我的CSS：

html, body, .overflowWrap {
overflow-x: hidden;
}

现在可能有点矫枉过正，但就像魅力一样！

Answer 10

我遇到了与Android设备相同的问题，但没有遇到iOS设备。通过在绝对定位元素的外部div中指定position：relative来解决管理（溢出：隐藏为外部div）

Answer 11

在正文中创建一个站点包装器div并将overflow-＆gt; x：hidden应用于正文的包装器INSTEAD或者html修复了该问题。

在将<div class="mainDiv"> <div id="secondDiv" class="check"> <div class="iteratorDiv1" id="id1"> <a href="url">link text</a> </div> <div class="iteratorDiv2" id="id2"> <a href="url">link text</a> </div> <div class="iteratorDiv3" id="id3"> <a href="url">link text</a> </div> <div class="iteratorDiv4" id="id4"> <a href="url">link text</a> </div> </div> </div>添加到包装器后，这对我有用。

Answer 12

我使用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

Answer 13

由于subarachnid说溢出-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;
}

Link

Answer 14

我刚刚在这个问题上工作了几个小时，尝试了这个和其他页面的各种组合。最终对我有用的是制作一个网站包装器div，如接受的答案所示，但将两个溢出设置为隐藏而不仅仅是x溢出。如果我在滚动时留下溢出，我最终得到的页面只能垂直滚动几个像素然后停止。

#all-wrapper {
  overflow: hidden;
}

这就足够了，不需要在body或html元素上设置任何内容。

Answer 15

解决我的引导模式（包含表单）的这个问题的唯一方法是将以下代码添加到我的CSS：

.modal {
    -webkit-overflow-scrolling: auto!important;
}

Answer 16

我从本主题的回复中尝试了多种方法，大多数都可以使用，但有一些副作用，例如，如果我在body,html上使用overflow-x，当用户在移动设备上向下滚动时，它可能会使网页变慢/冻结。 / p>

在体内的wrapper / div上使用position: fixed也是不错的选择，但是当我有菜单并使用Javascript时，请单击动画滚动到某个部分，这是行不通的。

因此，我决定在主体内部的wrapper / div上使用touch-action: pan-y pinch-zoom。问题解决了。

Answer 17

解决这个问题的最简单方法，添加

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

Overflow-x：hidden不会阻止内容在移动浏览器中溢出

17 个答案: