Ind*_*ity 124 css overflow viewport mobile-browser
我这里有一个网站.
在桌面浏览器中查看,黑色菜单栏正确地仅延伸到窗口的边缘,因为它body具有overflow-x:hidden.
在任何移动浏览器中,无论是Android还是iOS,黑色菜单栏都会显示其全宽,这会在页面右侧显示空白区域.据我所知,这个空格甚至不是html或body标签的一部分.
即使我将视口设置为以下特定宽度<head>:
<meta name="viewport" content="width=1100, initial-scale=1">
该网站扩展到1100px,但仍然有超过1100的空白.
我错过了什么？如何将视口保持为1100并切断溢出？
Ind*_*ity 236
在内部创建一个站点包装器div <body>并将其overflow-x:hidden应用于包装器INSTEAD <body>或<html>修复该问题.
看起来解析<meta name="viewport">标记的浏览器只是忽略和标记overflow上的属性.htmlbody
sub*_*nid 72
尝试
html, body {
overflow-x:hidden
}
而不仅仅是
body {
overflow-x:hidden
}
Bra*_*rad 67
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;
}
Wal*_*erk 26
这是解决Safari中水平滚动的最简单的解决方案.
html, body {
position:relative;
overflow-x:hidden;
}
小智 19
正如@Indigenuity所述,这似乎是由浏览器解析<meta name="viewport">标签引起的.
要在源头解决此问题,请尝试以下操作:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">.
在我的测试中,这可以防止用户缩小以查看溢出的内容,因此也可以防止平移/滚动到它.
小智 16
body{
height: 100%;
overflow: hidden !important;
width: 100%;
position: fixed;
适用于iOS9
小智 6
保持视口不变： <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% 调整为较低的值。需要对您的代码进行很多调整以创建适当的布局，我不确定您打算做什么，但上面的代码会以某种方式修复您的溢出栏。
没有以前的单一解决方案对我有用,我不得不将它们混合在一起并在旧设备(iphone 3)上修复问题.
首先,我必须将html内容包装到外部div中:
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
然后我不得不将溢出应用于包装器,因为overflow-x不起作用:
#wrapper {
overflow: hidden;
}
这解决了这个问题.
在主体内部创建站点包装div并将overflow-> x：hidden应用于主体或html的封装INSTEAD可以解决此问题。
在添加position: relative到包装器之后，这对我有用。