场景:

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

然后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

ios webview下footer部分fixed失效问题的更多相关文章

  1. ios webview下纯JS实现长按

    app,其中有长按LI列表弹出菜单,只要清楚五个方法就行:ontouchstart.ontouchmove.ontouchend.setTimeout.clearTimeout 1.首先在我们按下手指 ...

  2. 安卓webview下使用zepto的swipe失效

    安卓webview下使用zepto的swipe遇到的坑 众所周知,安卓手机上touch事件一直有各种各样莫名其妙的问题. 比如,我想要用swipeLeft/swipeRight监听向左向右滑动事件,如 ...

  3. vue router 修改title(IOS 下动态改变title失效)

    在ios下app  设置document.title = "titleName" 失效,原因是在IOS webview中网页标题只加载一次,动态改变是无效的. 在路由配置中添加   ...

  4. ios端position为fixed失效的解决办法

    关键代码 document.getElementById("searchInputbox").addEventListener('touchmove', handler, {pas ...

  5. 苹果IOS下text-shadow与box-shadow失效的解决办法

    加入以下样式,可以解决苹果IOS下text-shadow与box-shadow失效的问题 -webkit-appearance: none

  6. ios客户端浏览器样式加载失效问题

    最近线上测试中出现一个奇怪的问题,ios客户端浏览器样式加载失效. 从表象来看,同样的css,安卓手机上可以正常展示,但是到ios手机上首次进入页面就不能正常显示 这时候,我们首先会考虑是不是ios设 ...

  7. iOS Webview 实现修改javascript confirm 和 alert

    贴代码: @interface UIWebView (JavaScriptAlert) -(void) webView:(UIWebView *)sender runJavaScriptAlertPa ...

  8. IOS webView学习

    本文简单介绍下在IOS中,webView的基本用法,也顺便强化下自己的基础知识----天明少羽爬楼梯 一.加载外部HTML 显示webView 报错:NSURLSession/NSURLConnect ...

  9. IOS 开发下拉刷新和上拉加载更多

    IOS 开发下拉刷新和上拉加载更多 简介 1.常用的下拉刷新的实现方式 (1)UIRefreshControl (2)EGOTTableViewrefresh (3)AH3DPullRefresh ( ...

随机推荐

  1. idhttp.post方式 调用datasnap rest 远程方法(转咏南兄)

    idhttp.get方式调用,这种比较简单,大家都会.post方式网上却没有任何成功的代码,本人也是摸索了一个上午才搞定. 分享给大家. (1)post方式调用的远程方法,方法名必须加“update” ...

  2. GDI+_SavePic

    Option Explicit Private Const EncoderQuality As String = "{1D5BE4B5-FA4A-452D-9CDD-5DB35105E7EB ...

  3. week07 13.3 NewsPipeline之 三News Deduper之 tf_idf 查重

    我们运行看结果 安装包sklearn 安装numpy 安装scipy 终于可以啦 我们把安装的包都写在文件里面吧 4行4列 轴对称 只需要看一半就可以 横着看 竖着看都行 数值越接近1 表示越相似 我 ...

  4. input设置背景透明、placeholder的字体颜色及大小

    1.设置input背景透明: background:rgba(255,255,255,0.1); 前面三个参数为对应的rgb数值,第四个参数为透明度:0~1,0:透明,1:不透明: 2.设置input ...

  5. 前端 跨Area后Cookie无法访问

    创建两个区域,一个是User,一个是Manage. User区域有两个页面,index1,和index2 User区域: index1:负责写入cookie index2:负责读取cookie Man ...

  6. ubuntu下搭建svn服务器

    [ubuntu下搭建svn服务器] 1.创建目录 mkdir ~/svn/repository/ 2.创建仓库 svnadmin create repository 3.进入 repository/c ...

  7. springboot整合dubbox与zookeeper

    springboot中dubbo依赖的引入和配置(application.properties)参见:https://blog.csdn.net/wohaqiyi/article/details/72 ...

  8. spring整合kafka(配置文件方式 消费者)

    Kafka官方文档有   https://docs.spring.io/spring-kafka/reference/htmlsingle/ 这里是配置文件实现的方式 先引入依赖 <depend ...

  9. 《Java程序设计》第二周学习总结(一)

    教材学习内容总结 标识符.关键字 基本数据类型 类型转换运算 输入.输出数据 数组 教材学习中的问题和解决过程 问题1:在创建vim并编写完成后出现以下情况 问题1解决方案:打开虚拟机的文件目录,发现 ...

  10. android nostra13

    nostra13的ImageLoader可以让图片能在异步加载更加流畅,可以显示大量图片,在拖动ListView的时候不会出现卡的现象.可以实现ListView的图片加载.GridView的图片加载. ...