这个页面分为上中下三部分,上部分是还款充值那一块,中部是中间灰色的条,下部分是分期及其明细。其中,上,中,下的导航栏用的是固定定位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失效带来的错位问题。
网友评论