IOS 键盘弹出导致的position:fixed 无效问题
解决办法(还未测试):
只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;overflow:scroll;就可以实现效果，无需插件。可拷贝下面代码运行。
<!DOCTYPE html>
<html lang="zh_cmn">
<head>
<meta charset=utf-8 />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
<title></title>
<style>
.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;}
.head{top:0;}
.foot{bottom:0;}
.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;}
</style>
</head>
<body>
<header class="head">顶部固定区域</header>
<article class="main" id="wrapper">
<div>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<p>当内容欲出隐藏时，灰色区域可上下拖动</p>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
<input type="text" value="" class="inputtext"> <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
content <br>
</div>
</article>
<footer class="foot">底部固定区域</footer>
</body>
</html>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部
IOS 键盘弹出导致的position:fixed 无效问题的更多相关文章
- h5页面ios键盘弹出收起后页面底部留白问题
<input placeholder="验证码" type="tel" v-model="verify" maxlength=&quo ...
- iOS 键盘弹出遮挡输入框
#pragma mark 键盘弹出遮挡输入框 //开始编辑输入框的时候,软键盘出现,执行此事件 -(void)textFieldDidBeginEditing:(UITextField *)textF ...
- H5页面IOS中键盘弹出导致点击错位的问题
IOS在点击输入框弹出键盘 键盘回缩 后 定位没有相应改变 还有 textarea 也会弹出键盘 $("input").blur(function() { console.l ...
- iOS:键盘弹出和收起的通知使用
介绍:不论是UITextField,还是UITextView,使用它们输入文字时都是有键盘的弹出,此时可能会挡住我们创建的一分部其他视图,此时,就需要根据键盘的高度将我们被隐藏的部分View做向上或者 ...
- IOS键盘弹出、隐藏
IOS键盘 UIKeyboardFrameBeginUserInfoKey:动画开始前键盘的size UIKeyboardFrameEndUserInfoKey:动画结束后键盘的size - (voi ...
- flutter 防止键盘弹出 导致超出屏幕
return Scaffold( appBar: AppBar( elevation: 0.0, title: new Text("登陆"), ), resizeToAvoidBo ...
- 处理ios键盘弹出按钮点击click失效
用ontouchstart绑定事件即可,然后用 document.activeElement.blur();让键盘收起 this.value = value.replace(/\s/g, " ...
- ios11，弹出层内的input框光标错位 键盘弹出时，输入信息，光标一直乱跳
之前开发了一个微信项目,维护期中苹果手机突然出现光标错位现象,经过排查,发现是最新的ios11系统的锅. 具体情况:弹出层使用position: fixed:弹出层内附带input/textare ...
- js 移动端之监听软键盘弹出收起
js 移动端关于页面布局,如果底部有position:fixed的盒子,又有input,当软键盘弹出收起都会影响页面布局.这时候Android可以监听resize事件,代码如下,而ios没有相关事件. ...
随机推荐
- U3D 垂直同步
Unity3D中新建一个场景空的时候,帧速率(FPS总是很低),大概在60~70之间.一直不太明白是怎么回事,现在基本上明白了.我在这里解释一下原因,如有错误,欢迎指正.在Unity3D中当运行场景打 ...
- js中的jsonp
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 解决Android SDK Manager无法更新下载
Android Studio2.2版本有一个bug,当在gradle文件编写代码时,程序会自动同步编译,这时整个程序都处于页面卡顿状态,要等待很久才能缓过来.最近实在忍受不了这种龟速,刚好发现有了新的 ...
- [原]Jenkins(十)---jenkins注册管理员admin并赋所有权限给admin
/** * lihaibo * 文章内容都是根据自己工作情况实践得出. * 版权声明:本博客欢迎转发,但请保留原作者信息! http://www.cnblogs.com/horizonli/p/533 ...
- 在浏览器中输入 www.baidu.com 后执行的全部过程
现在假设如果我们在客户端(客户端)浏览器中输入http://www.baidu.com,而baidu.com为要访问的服务器(服务器),下面详细分析客户端为了访问服务器而执行的一系列关于协议的操作: ...
- for循环 例子
<script type="text/javascript"> //循环 for循环 //循环操作某一个功能(执行某段代码) //四要素 1.循环初始值 2.循环条件 ...
- linux下安装cmake(安装opencv库)
apt-get install cmake cmake --version(显示版本号) cmake-gui(打开gui界面) 如果打不该GUI界面时候就需要apt-get install cmake ...
- tomcat项目启动报错java.lang.ClassCastException: org.apache.xerces.parsers.XML11Configuration……
周一上班启动项目,报错如图: 看到网上说的原因,有jar包冲突造成的,我这里的是: 情况:console打印信息有多次连接数据库,但该项目只需要连接一个库.再仔细看,发现有其他项目的信息,打开tomc ...
- python中的os
import sys, os print(__file__) # 绝对路径,实际是文件名 /Users/majianyu/Desktop/test/bin/bin.py print(os.path.a ...
- mysql事务及慢查询
1, 在 MySQL 中只有使用了 Innodb 数据库引擎的数据库或表才支持事务 l 原子性:构成事务的的所有操作必须是一个逻辑单元,要么全部执行,要么全部不执行. l 稳定性(一致性):数据库在事 ...