Css 溢出-x：隐藏不'；t防止内容在移动浏览器中溢出
我有一个网站 在桌面浏览器中查看时，黑色菜单栏仅正确地延伸到窗口边缘，因为Css 溢出-x：隐藏不'；t防止内容在移动浏览器中溢出,css,overflow,viewport,mobile-browser,Css,Overflow,Viewport,Mobile Browser,我有一个网站 在桌面浏览器中查看时，黑色菜单栏仅正确地延伸到窗口边缘，因为主体具有overflow-x:hidden 在任何移动浏览器中，无论是Android还是iOS，黑色菜单栏都会显示其全宽，页面右侧会出现空白。据我所知，这个空白甚至不是html或body标记的一部分 即使我在中将视口设置为特定宽度： 该站点扩展到1100px，但仍有超过1100的空白 我错过了什么？如何将视口保持在1100并切断溢出？试试看 html, body { overflow-x:hidden } 而
主体overflow-x:hiddenhtmlbody
html, body {
overflow-x:hidden
}
body {
overflow-x:hidden
}
在
溢出-x:hiddenhtml主体溢出注意：您可能还需要将
position:relative#menubarborder-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*/
paddingli.menuitem {
display: block;
padding: 0px 20px;
}
bodybodyhtml, body, .overflowWrap {
overflow-x: hidden;
}
位置：已修复起作用
body.modal-open {
overflow: hidden;
position: fixed;
}
确实如此。然而，它也有一个基本上滚动到顶部的轻微副作用position:absolute
解决了这一问题，但重新引入了在手机上滚动的功能
如果您知道您的视口（），只需为位置添加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;
}
我还添加了这个选项，以防止在显示/隐藏modals时底层页面左/右跳转
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
我在Android设备上遇到了同样的问题，但在iOS设备上没有遇到。通过在绝对定位元素的外部div中指定position:relative（溢出：对于外部div隐藏）来管理解析
在iOS9上工作以前没有一个单一的解决方案对我有效，我不得不将它们混合使用，并在旧设备（iphone3）上解决了这个问题
首先，我必须将html内容包装到外部div中：
<html>
<body>
<div id="wrapper">... old html goes here ...</div>
</body>
</html>
这就解决了这个问题。我使用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;
}
}
结构如下：
@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\u screen>>内置>>end\u screen\u 2（div）>>内置>>内置>>end\u screen\u 2。
'end\u screen是end\u screen\u 1和end\u screen\u 2 div的包装器
如@Indigenuity所述，这似乎是由浏览器解析
标记引起的
要从根源上解决此问题，请尝试以下操作：
在我的测试中，这可以防止用户缩小以查看溢出的内容，因此也可以防止平移/滚动到该内容。正如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;
}
**HTML**
达斯
第一条
第二条
数字减影
**CSS**
正文，html{
溢出x：隐藏；
}
身体{
保证金：0；
}
孔特纳先生{
宽度：100vw；
}
班纳先生{
背景图像：url（“http://p3cdn4static.sharpschool.com/UserFiles/Servers/Server_3500628/Image/abstract-art-mother-earth-1.jpg");
宽度：100vw；
高度：400px；
左边距：0；
左：0；
}
孔特纳先生{
高度：100px；
}
.菜单{
显示器：flex；
背景色：青色；
身高：100%；
证明内容：柔性端；
对齐：内容：底部；
}
.img1{
宽度：150px；
高度：25px；
变换：旋转（45度）；
背景色：红色；
位置：绝对位置；
顶部：40px；
右：-50px；
线高：25px；
填充：0 20px；
光标：指针；
颜色：白色；
文本对齐：居中；
过渡：全部为0.4s；
}
.img2{
宽度：190px；
文本对齐：居中；
变换：旋转（45度）；
背景色：#333；
位置：绝对位置；
高度：25px；
线高：25px；
顶部：55px；
右：-50px；
填充：0 20px；
光标：指针；
颜色：白色；
过渡：全部为0.4s；
}
.悬停{
溢出：隐藏；
}
.hover:hover.img1{
背景色：#333；
过渡：全部为0.4s；
}
.hover:hover.img2{
背景颜色：蓝色；
过渡：全部为0.4s；
}
解决我的引导模式（包含表单）问题的唯一方法是将以下代码添加到我的CSS中：
.modal {
-webkit-overflow-scrolling: auto!important;
}
在正文中创建一个站点包装器div，并将溢出->x:hidden应用于包装器而不是正文或html修复了这个问题
在添加了positio之后，这对我很有效
**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;
}
.modal {
-webkit-overflow-scrolling: auto!important;
}
#all-wrapper {
overflow: hidden;
}
html, body {
position:relative;
overflow-x:hidden;
}