场景:

如下图所示,一个很正常的页面需求,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. js:作用域总结1

    先说几个概念: 1.js代码从上往下执行 2.变量提升: 变量提升是浏览器的一个功能,在运行js代码之前,浏览器会给js一个全局作用域叫window,window分两个模块,一个叫内存模块,一个叫运行 ...

  2. git push以后GitHub上文件夹灰色 不可点击

    1.删除本地文件夹里的 .git .gitignore文件 2.如果没成功,就把文件名改下,应该是有缓存,改完名后再add/commit/push

  3. SQL Server中有关约束(constraint)的一些细节

    本文出处:http://www.cnblogs.com/wy123/p/7350265.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...

  4. 《Spring_Four》第一次作业:团队亮相

    part one: 1.队名:Spring_Four 2.团队成员组成:学号/姓名(标记团队组长) 201571030114 李蕾 201571030143 周甜甜 201571030139 张天旭( ...

  5. 利用python的requests发送http请求

    >>> from requests import put, get >>> put('http://localhost:5000/todo1', data={'da ...

  6. actuator/hystrix.stream 没有反应的方法

    http://localhost:8086/actuator/hystrix.stream 在启动类加上,就ok了 @Bean public ServletRegistrationBean hystr ...

  7. Codeforces Round #439 C. The Intriguing Obsession

    题意:给你三种不同颜色的点,每种若干(小于5000),在这些点中连线,要求同色的点的最短路大于等于3或者不连通,求有多少种连法. Examples Input 1 1 1 Output 8 Input ...

  8. sed 笔记

    sed是一个非交互式文本编辑器,他可以对文本文件和标准输入进行编辑,标准输入可以是来自键盘,文件重定向,字符串,变量甚至来自于管道的文本.sed适用于以下三种场合: 编辑相对交互式文本编辑器而言太大的 ...

  9. Gson的入门使用

    Java对象和Json之间的互转,一般用的比较多的两个类库是Jackson和Gson,下面记录一下Gson的学习使用. 基础概念:  Serialization:序列化,使Java对象到Json字符串 ...

  10. CentOS7 firewalld防火墙配置

    [root@ecs ~]# firewall-cmd --version       //查看版本0.3.9 [root@ecs ~]# firewall-cmd --state        //查 ...