ios webview下footer部分fixed失效问题

场景：

如下图所示，一个很正常的页面需求，footer固定在底部，中间为滚动内容区

然后footer的css一般是这样的

footer{
        position:fixed;
        bottom:0;
        left:0;
        width:100%;
        ``````
}

实测chrome下没毛病，ios微信浏览器打开也没毛病，但是！！！

在ios给我们开的webview里面，这个footer部分开始“跑”了，

具体情况是，footer在页面滑动的时候也跟着滑动了，等滑动完毕，

footer部分又自动“归位”了，锁定到了底部。是不是很诡异 ···

就IOS的webview有这毛病，

然后就摸索了一个解决方案是把整个body固定高度（屏幕高度），

然后padding-bottom:(footer的高度)。

footer的css就用absolute，定在底部了。

上面的主内容区就overflow-y:scroll；

然后记得在这里加上-webkit-overflow-scrolling: touch;

为了让你在ios上流畅滚动的。

 

避免使用fixed

 

转载于:https://www.cnblogs.com/AlexBlogs/p/7220746.html