场景:css
以下图所示,一个很正常的页面需求,footer固定在底部,中间为滚动内容区ios
而后footer的css通常是这样的web
footer{ position:fixed; bottom:0; left:0; width:100%; `````` }
实测chrome下没毛病,ios微信浏览器打开也没毛病,可是!!!chrome
在ios给咱们开的webview里面,这个footer部分开始“跑”了,浏览器
具体状况是,footer在页面滑动的时候也跟着滑动了,等滑动完毕,微信
footer部分又自动“归位”了,锁定到了底部。是否是很诡异 ···spa
就IOS的webview有这毛病,code
而后就摸索了一个解决方案是把整个body固定高度(屏幕高度),blog
而后padding-bottom:(footer的高度)。webview
footer的css就用absolute,定在底部了。
上面的主内容区就overflow-y:scroll;
而后记得在这里加上-webkit-overflow-scrolling: touch;
为了让你在ios上流畅滚动的。
避免使用fixed