场景:

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

ios webview下footer部分fixed失效问题-LMLPHP

然后footer的css一般是这样的

footer{
position:fixed;
bottom:;
left:;
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

05-06 11:45