1、问题：移动端出现弹窗后，滑动页面，页面底部出现空白

二、原因

经过分析，发现overflow: hidden;在移动端失效，导致弹窗出现时，滑动页面，页面底部出现空白。

三、解决

参考网址：https://www.jianshu.com/p/b241c4a4ec34

弹窗打开时给body元素设置position: fixed, 弹窗关闭时给body元素设置position: static。

四、移动端兼容性问题解决方案

参考网址：https://github.com/markyun/My-blog/issues/88

解决overflow: hidden在移动端失效问题的更多相关文章

  1. 解决overflow:hidden在安卓微信页面没有效果的办法

    在做h5移动端时候,发现overflow: hidden;在安卓微信页面失效问题,经研究和实验,用第三种方法和第四种方法可以解决! 1.完全隐藏 在<boby>里加入scroll=&quo ...

  2. overflow hidden 遇上absolute失效

    原文地址 背景 这几天开发的时候遇到了个问题,如图1. 写了个demo 由于页面并没有进行整体缩放,导致在小屏幕手机上显示会有异常.PM要求能够显示最后一个完整的标签. 当在iPhone5手机上查看页 ...

  3. 给元素设置overflow:hidden，pc端正常，但移动端依然可以滑动

    给设置overflow:hidden的元素设置position:fixed即可解决

  4. 利用float与overflow:hidden实现移动端两栏自适应布局

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css ie7中overflow:hidden失效问题及解决方法

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  6. 在ie7中overflow:hidden失效问题及解决方案

    css兼容ie7: 做页面的时候用负边距居中的时候在IE7下面,父节点中的overflow:hiden失效的问题,查阅了一些资料,总结一下解决方法. 问题原因: 当父元素的直接子元素或者下级子元素的样 ...

  7. IE6 Bug overflow:hidden失效

    下面就是我所收集或遇到的IE6 Bug之一:overflow:hidden失效 当父元素的直接子元素或者下级子元素的样式拥有position:relative属性时,父元素的overflow:hidd ...

  8. IE6、7下overflow:hidden失效的问题

    问题产生原因: 当父元素的直接子元素或者下级子元素的样式拥有position:relative或者position:absolute属性时,父元素的overflow:hidden属性就会失效. 例如: ...

  9. 解决 border-radius 元素在应用了 transform 的子元素 时overflow:hidden 失效的问题

    受大家启迪,于是最近深入研究了一下Css3中的一些属性.之中也是碰到了个不为我知的问题,在这里特此总结并与大家分享. 问题重现:在父元素上应用了 border-radius 的圆角属性.加上  ove ...

随机推荐

  1. C#调用VisionPro工程文件

    添加一个按钮与控件,双击按钮,在程序中写下一下代码, CogJobManager mymanger = (CogJobManager)CogSerializer.LoadObjectFromFile( ...

  2. keepalive配置mysql自动故障转移

    keepalive配置mysql自动故障转移 原创 2016年02月29日 02:16:52 2640 本文先配置了一个双master环境,互为主从,然后通过Keepalive配置了一个虚拟IP,客户 ...

  3. java——什么是浅表副本

    ArrayList.clone(),hashtable.clone()方法返回此ArrayList的浅表副本(不复制这些元素本身),那么什么是浅表副本? 一个集合的浅度拷贝意味着只拷贝集合中的元素,不 ...

  4. TestNG+Java+Selenium+Maven 代码实例

    搭环境时注意不要忘记testng的jar包,selenium的jar包 package com.guge.test; import org.testng.annotations.Test;import ...

  5. An item with the same key has already been added. Key: Pomelo.EntityFrameworkCore.MySql.Infrastructure.Internal.MySqlOptionsExtension

    An item with the same key has already been added. Key: Pomelo.EntityFrameworkCore.MySql.Infrastructu ...

  6. Logistic Regression(逻辑回归)

    分类是机器学习的一个基本问题, 基本原则就是将某个待分类的事情根据其不同特征划分为两类. Email: 垃圾邮件/正常邮件 肿瘤: 良性/恶性 蔬菜: 有机/普通 对于分类问题, 其结果 y∈{0,1 ...

  7. ORM版学员管理系统

    ORM版学员管理系统 班级表 表结构 class Class(models.Model): id = models.AutoField(primary_key=True) # 主键 cname = m ...

  8. VUE系列一：VUE入门：搭建脚手架CLI（新建自己的一个VUE项目）

    一.VUE脚手架介绍 官方说明:Vue 提供了一个官方的 CLI,为单页面应用快速搭建 (SPA) 繁杂的脚手架.它为现代前端工作流提供了 batteries-included 的构建设置.只需要几分 ...

  9. HTML5 加密和摘要算法（base64，md5, sha1,rsa）

    < 一 > BASE64 1,Base64 是网络上最常见的用于传输 8Bit 字节码的编码方式之一,Base64就是一种基于64个可打印字符来表示二进制数据的方法 2,首先需要一个库 b ...

  10. Head First Java.(第2版)

    优点:语法 面向对象 内存管理 和最棒的跨平台可移植性 缺点: 慢 JVM Java(虚拟机) 编译后的字节码与平台无关. 你的朋友不会买一台真正的Java机器,但是他们都会有Java虚拟机(通过软件 ...