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. Redis深入学习笔记（五）Redis阻塞原因

    在实际使用Redis中,有时会碰到客户端timeout异常,或者没有可用连接异常等等异常,总结大概有如下原因: 内部阻塞原因: 1)大对象存取. 2)Fork阻塞. 3)Aof刷盘阻塞(距离上次刷盘大 ...

  2. C语言数据结构基础学习笔记——图

    图(G)由顶点集(V)和边集(E)组成,G=(V,E) 常用概念: ①V(G)表示图G中顶点的有限非空集,V永不为空: ②用|V|表示图G中顶点的个数,也称为图G的阶: ③E(G)表示图G中顶点之间关 ...

  3. sublimit 编辑器 设置默认的编码

    1.首选项>>设置 - 用户 2.加上:"default_encoding": "UTF-8"

  4. Laravel发送邮箱消息验证

    945的密码:umywcvkrfrytfeef ENV的配置如下: MAIL_DRIVER=smtpMAIL_HOST=smtp.qq.comMAIL_PORT=25MAIL_USERNAME=XXX ...

  5. Springboot admin 发送邮件失败：com.sun.mail.smtp.SMTPSenderFailedException: 553 Mail from must equal authorized user

    发邮件已经是老生常谈了,今天又遇到了,而且又出了各种问题.我晕哦. 我的配置是: spring.mail.host=smtp..com spring.mail.username=klxxxx spri ...

  6. java面试题复习（一）

    //基础最重要,如果面试官问一个答不上一个,那有难度的都都不用问了,直接就pass了,就像我,嘿嘿. //每天最好熟记10个问题,这些问题在编程是会很厚帮助,帮你避免很多不应该出现的错误. 一.面向对 ...

  7. django 之 ContentType的使用

    1. ContentType 是干什么用的呢: 1. ContentType: 主要的作用就是Django orm的创建表的时候,可以方便多表查询使用,简化多表查询的过程 2.ContentType ...

  8. c#_生成图片式验证码

    废话不多说直接上代码. class Check_Code { /// <summary> /// 生成随机验证码数字+字母 /// </summary> /// <par ...

  9. 搭建Android浏览器壳子

    搭建Android浏览器壳子 不久前我们要做一个Android端的手机APP,但没有用Android原生的组件, 而是把这个APP做成了一个访问某一固定IP的浏览器,即单纯的一个壳子: 具体的内容用V ...

  10. 最长公共前缀(python) leetcode答案

    直接上代码: def longestCommonPrefix(strs): """ :type strs: List[str] :rtype: str "&qu ...