美文网首页
ios系统下使用fixed定位,弹出键盘导致fixed失效问题

ios系统下使用fixed定位,弹出键盘导致fixed失效问题

作者: 胖胖的胖胖二 | 来源:发表于2018-02-07 18:27 被阅读0次
    页面展示

    这个页面分为上中下三部分,上部分是还款充值那一块,中部是中间灰色的条,下部分是分期及其明细。其中,上,中,下的导航栏用的是固定定位fixed,分期明细作为内容可以滑动;

    问题描述:当点击还款充值按钮旁边的修改图标时,会出现一个自定义的弹出框,要求输入金额,输入框获取焦点,弹出键盘,再返回到原来页面,发现分期明细错位了。

    弹出框弹出 分期明细错位

    这个bug好像只在ios上有,网络上关于这种现象的解决办法也有很多,在此我采用的方法是:将包住分析明细的div改成absolute,为了保证内容能够滑动,使用overflow-y:scroll.那怎样让包住分期明细的div元素的高度不由其内容来决定呢?加上一个bottom:0就可以解决。

    有bottom:0的外层div 没有bottom:0的div

    此外,要注意一个问题,在这层div我们设置了position:absolute,它的父元素没有

    posit on:relative这一属性,所以它的top值是相对于body来计算的。有了这几个属性,就能完美解决fixed失效带来的错位问题。

    相关文章

      网友评论

          本文标题:ios系统下使用fixed定位,弹出键盘导致fixed失效问题

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