美文网首页
移动端使用vh,导致页面被拖动,marginbottom,pad

移动端使用vh,导致页面被拖动,marginbottom,pad

作者: 王善良_ | 来源:发表于2021-05-28 17:19 被阅读0次

    html,body 使用100vh ,overflow:hidden,在有侧边栏抽屉和导航条的情况下,实现局部的滚动

    问题: html,body在拖拽的时候产生滚动条,或者里面的内容滚动到底部,永远没法展示全,而且加了一点margin-bottom或者padding-bottom没用,要加很多能看到

    原因:vh 计算的时候 ios 上的safari 和chorme 会傻逼一样的把下方的工具栏的高度也算进去,所以隐藏工具栏后的vh才是正常的,但是正常情况下不会隐藏工具栏,所以用vh 不行,可以用ios上的火狐浏览器看下,不会产生这个问题

    解决: html,body 给 height: 100% 即可,其他不变


    image.png

    相关文章

      网友评论

          本文标题:移动端使用vh,导致页面被拖动,marginbottom,pad

          本文链接:https://www.haomeiwen.com/subject/lsvssltx.html