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没有相关事件. ...
随机推荐
- Android SAX解析XML
本篇讲解一下SAX解析XML这种方式,首先来看一下它的基本介绍: SAX是一种以事件驱动的XML API,由它定义的事件流可以指定从解析器传到专门的处理程序的代码的XML结构,简单的讲,它是种解析速度 ...
- 【JS加密库】SJCL ：斯坦福大学JS加密库
斯坦福大学Javascript加密库简称SJCL,是一个由斯坦福大学计算机安全实验室创立的项目,旨在创建一个安全.快速.短小精悍.易使用.跨浏览器的JavaScript加密库. 斯坦福大学下载地址:h ...
- SQLServer2008 导出数据库表结构和数据
很多朋友问到sql server数据库”生成脚本”,只导出了数据库的sql脚本,而表里的数据依然没有导出来.很简单,看教程: 注:我这里用的SQLServer2008,其它版本应该差不多. 一.选中要 ...
- 安装和配置hive
1.上传hive.mysql.mysql driver到服务器/mnt目录下: [root@chavin mnt]# ll mysql-5.6.24-linux-glibc2.5-x86_64.tar ...
- 使用FFmpeg常见问题
使用FFmpeg常见问题 https://blog.csdn.net/willib/article/details/52530328 https://blog.csdn.net/nogodoss/ar ...
- 确界原理 supremum and infimum principle 戴德金定理 Dedekind theorem
确界原理 supremum and infimum principle 戴德金定理 Dedekind theorem http://www.math.ubc.ca/~cass/courses/m ...
- radio样式的写法，单选和多选如何快速的改变默认样式，纯CSS，
一.纯CSS写法改变单选框的默认选择样式,用背景图片代替 input[type='radio']:radio:before { content: '';//这里需要有 width: 20px; hei ...
- [cloud][sdn] neutron了解
了解 neutron 文档:https://yeasy.gitbooks.io/openstack_understand_neutron/content/ LB讲的不细.DVR讲的不清晰. 读了全文之 ...
- ms sql server 游标
很简单的一个小例子. /****** Object: StoredProcedure [dbo].[usp_test] Script Date: 10/28/2016 15:08:31 ******/ ...
- ORACLE DIRECTORY目录管理步骤
ORACLE DIRECTORY目录管理步骤 ORACLE的 DIRECTORY在数据库中是个目录的路径,需要在操作系统中有相应的目录与之对应:ORACLE目录的作用就是让ORACLE数据库和操作系统 ...