最近在使用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. linux服务器上

    命令行>mysql -uwin -pwin2009进入mysql command状态>use mindo时入mindo数据库>source 500sql.txt执行sql

  2. Java基础知识强化之IO流笔记44：IO流练习之 复制图片的 4 种方式案例

    1. 复制图片的 4 种方式案例: 分析: 复制数据,如果我们知道用记事本打开并能够读懂,就用字符流,否则用字节流. 通过该原理,我们知道我们应该采用字节流. 而字节流有4种方式,所以做这个题目我们有 ...

  3. iOS中使用nil NULL NSNULL的区别

    nil NULL NSNULL的区别主要以下几点 1.nil:一般赋值给空对象 2.NLL:一般赋值给nil之外的其他空值.入SEL等. 3.NSULL:NSNULL只有一种方法+ (NSNull * ...

  4. [转]Form中控制Tab画布不同标签间切换的方法

    转自:http://yedward.net/?id=68 Form中一般常用的画布类型包括content.stacked.tab这三种,其实content类型的画布是每一个form都必须有的,而且只能 ...

  5. Apache Commons Beanutils对象属性批量复制(pseudo-singleton)

    Apache Commons Beanutils为开源软件,可在Apache官网http://commons.apache.org/proper/commons-beanutils/download_ ...

  6. 11.13 noip模拟试题

    题目名称 笔记 括号 城堡可执行文件名 note brackets castle输入文件名 note.in brackets.in castle.in输出文件名 note.in brackets.ou ...

  7. 实现View弹性滑动例子

    弹性滑动原理 将一次大的滑动非为若干次小的滑动,并在一个时间段内完成.有一种顺畅的感觉更-好的用户体验 实现方式很多种,包括用Scroller.动画.延时策略. 使用Handler实现弹性滑动 效果可 ...

  8. com.android.builder.packaging.DuplicateFile

    解决方法:     packagingOptions {        exclude 'META-INF/DEPENDENCIES'        exclude 'META-INF/NOTICE' ...

  9. android多国语言文件夹

    android多国语言文件夹文件汇总如下:(有些语言的书写顺序可能跟中文是相反的) 中文(中国):values-zh-rCN 中文(台湾):values-zh-rTW 中文(香港):values-zh ...

  10. linux x64下编译libjpeg，libpng，zlib

    libJpeg编译: 下载libjpeg源码:http://www.ijg.org/,下载jpegsrc.v9a.tar.gz 解压源码,命令:tar -zxvf jpegsrc.v9a,源码文件夹为 ...