最近在使用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失效问题的更多相关文章

  1. position:fixed 失效

    如果position:fixed 失效,那应该是你设置position的元素的父元素中有设置了transform属性哦 . 把 transform删除或设置为none就可以解决啦. 但是如果trans ...

  2. 解决ie6不支持position: fixed;导致无法滚动的办法

    <div id="im" style="top: 100px; position: fixed; left: 5px; border: 3px solid #006 ...

  3. 解决IE6浏览器下position:fixed固定定位问题

    像你所遇到的问题一样, IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法.如果我们需要做某个元素始终位于浏览器的底部, ...

  4. android动画特效之解决解决移动后闪烁现象，解决输入法弹出后位置回复原状，解决两个动画叠加

    以下代码实现的效果是: BoundOpenView从居中移动到顶部,移动完后,BoundSendView从隐藏变为显示,并从顶部移动BoundOpenView下方20dp处,同时透明度慢慢增加. pr ...

  5. 周记3——解决fixed属性在ios软键盘弹出后失效的bug

    这周在做空间(“类似”qq空间)项目.首页是好友发表的说说,可以针对每条说说进行评论,评论框吸附固定在屏幕底部.此时,Bug来了...在ios上,软键盘弹出后fixed属性失效了.后来发现,ios绝大 ...

  6. 偏前端 - ios下position:fixed失效的问题解决

    如图,考虑到用户体验的问题,一般页面的下方提交按钮都会随着固定在页面上,方便用户点击. 有些人肯定就说了,这还不简单,position:fixed: 但是在ios这个坑货系统上这个position:f ...

  7. ios上position:fixed失效问题

    手机端上的猫腻真是多啊~~~ 此起彼伏! 最近又遇到了 固定定位的底部导航在ios上被弹出去 此时内心1w+个草泥马奔过~~~~~~~~ 直接上解决方案: <div class="ma ...

  8. position:fixed失效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. position:fixed失效情况

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. careercup-递归和动态规划 9.8

    9.8 给定数量不限的硬币,币值为25分.10分.5分和1分,编写代码就是n分有几种表示法. 解法: 使用回溯法进行解决,实际上就是一个类似枚举的过程,主要是在搜索尝试过程中寻找问题的解,当发现已不满 ...

  2. careercup-树与图 4.6

    4.6 设计一个算法,找出二叉查找树中指定结点的“下一个”结点(也即中序后继).可以假定每个结点都含有指向父节点的连接. 思路: 有两种情况:1)如果该结点存在右子树,则中序后继即为右子树中最小的结点 ...

  3. 玩转Android之数据库框架greenDAO3.0使用指南

    用过ActiveAndroid.玩过ORMLite,穿过千山万水,最终还是发现greenDAO好用,ActiveAndroid我之前有一篇文章介绍过 玩转Android之数据库框架ActiveAndr ...

  4. Java实现希尔排序（增量递减排序）

    package Insert.sort; import java.util.Scanner; /*又叫缩小增量排序,本质是插入排序,将待排的序列增量分成几个子序列,分别对每个子序列进行直接插入排序 * ...

  5. java学习粗略路线

    首先是JAVA基础JAVA SE(用于开发和部署桌面.服务器以及嵌入设备和实时环境中的Java应用程序.) 之后是JAVA EE(java企业级标准开发),先学习Servlet(控制器).JSP(在h ...

  6. Mysql 数据库 操作语句

    mysql 格式语句规范 如何登陆你的数据库? 举例! 如果你的是 编译安装的花 那就得去编译安装后的那个目录中去,我的是安装到/usr/local/mysql 下登陆数据库:cd /usr/loca ...

  7. java编写一个端口扫描器

    好久没写java了,学的时候,也没学习网络编程这一块,无意中看到了一本书,于是小小复习一下java,写个端口扫描器,玩玩吧,网上这种小公具有的是,就是自己无聊写着玩玩. 源代码如下: 共两个类,比较简 ...

  8. 20151214 jquery插件代码备份

    ;(function ($) { //局部性的 /*$.fn.extend({ 'nav' : function (color) { $(this).find('.nav').css({ 'list- ...

  9. C#中 字符串的处理

    3.字符串 1).字符串的不可变性 当你给一个字符串重新赋值之后,老值并没有销毁,而是重新开辟一块空间存储新值. 当程序结束后,GC扫描整个内存,如果发现有的空间没有被指向,则立即把它销毁. 2).我 ...

  10. group by java实现

    public static void abc(List list,String... sortName) throws Exception{ Map<String,List<Object& ...