ios解决输入框弹出后position:fixed失效问题
最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题。position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激活时,会出现位置错位的问题。
如下图:
受到CSDN上刘华童鞋(http://my.csdn.net/liu__hua)的启发,找到了目前位置比较完美的解决方案。
<!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%;background-color:#99CC00;} .head{top:0;} .foot{bottom:0;} .main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;} </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>
当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部,底部。
内容转载于:http://blog.csdn.net/liu__hua/article/details/40106595
以作记录。
ios解决输入框弹出后position:fixed失效问题的更多相关文章
- position:fixed 失效
如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 . 把 transform删除或设置为none就可以解决啦. 但是如果trans ...
- 解决ie6不支持position: fixed;导致无法滚动的办法
<div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...
- 解决IE6浏览器下position:fixed固定定位问题
像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...
- android动画特效之解决解决移动后闪烁现象,解决输入法弹出后位置回复原状,解决两个动画叠加
以下代码实现的效果是: BoundOpenView从居中移动到顶部,移动完后,BoundSendView从隐藏变为显示,并从顶部移动BoundOpenView下方20dp处,同时透明度慢慢增加. pr ...
- 周记3——解决fixed属性在ios软键盘弹出后失效的bug
这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...
- 偏前端 - ios下position:fixed失效的问题解决
如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...
- ios上position:fixed失效问题
手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...
- position:fixed失效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- position:fixed失效情况
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- careercup-递归和动态规划 9.8
9.8 给定数量不限的硬币,币值为25分.10分.5分和1分,编写代码就是n分有几种表示法. 解法: 使用回溯法进行解决,实际上就是一个类似枚举的过程,主要是在搜索尝试过程中寻找问题的解,当发现已不满 ...
- win7 设置自动关机
1.C:\Windows\System32\shutdown.exe 2. -s:表示关机: -r:表示重启: -t:表示时间,以秒为单位: -a:表示取消shutdown计划,即表示取消关机或重启命 ...
- iOS 并行编程:NSOperation Queues
1 简介 1.1 功能 Operation Queue也是IOS的一种并行编程技术,类似Dispatch Queue可以帮助用户管理多线程.但是Operation Queue将任务封装在 ...
- string与StringBuilder之性能比较
知道“StringBuilder比string性能强”好多年了,近日无聊病发作,就把这两个家伙给动了手术: using System; using System.Text; namespace Con ...
- 将table内容输出为csv文件
1.创建 directory create or replace directory tt as'c:\'; SELECT * FROM DBA_OBJECTS DO WHERE DO.OBJECT_ ...
- Redis操作List工具类封装,Java Redis List命令封装
Redis操作List工具类封装,Java Redis List命令封装 >>>>>>>>>>>>>>>> ...
- 动态使用webservice,以及含有ref类型的参数的问题
public class WSHelper { /// < summary> /// 动态调用web服务 /// < /summary> /// < param name ...
- JQuery设置input属性(disabled、enabled)
document.getElementById("removeButton").disabled = false; //普通Js写法 $("#removeButton&q ...
- bgycoding
//add by zzw@曾志伟 2015-12-9 [碧桂园项目] begin if(condition.indexOf("glbdef8 = 'Y'")>0){ Stri ...
- 【C#】获取本地Cookie的问题
using System; using System.Net; using System.IO; using System.Text; // // TODO: 在此处添加代码以启动应用程序 // st ...