移动端开发仿app头部底部固定设置position:fixed，android2.2以上已经实现。但是在ios8以下系统，当小键盘激活时，都会出现位置浮动问题。如图：

如何解决：

查阅资料之后想到一下几种解决方法

1，使用position：absolute模拟

<script type="text/javascript">
    window.onscroll=function(){
    $(".fixed").css("top",$(window).scrollTop());
   $(".foot").css("top",$(window).scrollTop()+$(window).height());
}
</script>

问题来了：滑动页面时头部底部div会有明显的抖动。

2，判断当前获得焦点元素是input则隐藏div改为position：absolute

<body onload=setInterval("a()",500)>

<script type="text/javascript">
  function a(){
    if(document.activeElement.tagName == 'INPUT'){    
      $(".fixed").css({'position': 'absolute','top':'0'}); 
       } else {  
         $(".fixed").css('position', 'fixed');  
        }
      }
  </script>

问题来了:不停监控dom，消耗资源。如果input个数较少，可在input里面添加onfocus事件好一些。但是如果是底部固定div此方法好像不太给力。

3，插件iscroll.js个人感觉不是很好用。可能方法不对，jQuery Mobile  没尝试，感觉会增负担。

4，重点来了：

只需要在中间部分外层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%;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>

当小键盘出现时头部、底部自动跳到页面最顶端、最底端。键盘隐藏时又会固定在头部，底部。顿时感觉开朗了

小技巧css解决移动端ios不兼容position:fixed属性，无需插件的更多相关文章

  1. IOS系统不兼容position: fixed;属性的解决方案

    position: fixed;属性在IOS系统手机上会有很明显的抖动,解决方式: 只需要在中间部分外层div添加css样式position:fixed;top:50px; bottom:50px;o ...

  2. 解决IE6不支持position:fixed属性

    最近在优化网站浮动广告时候遇见了IE6不支持position:fixed属性.上网收集了一下解决方案 比较好的方案就是利用css表达式进行解决 补充:CSS Expression (CSS 表达式), ...

  3. 解决IE6下固定定位问题 使用position:fixed

    IE6浏览器有太多的bug让制作网页的人头疼.这篇文章介绍的是介绍的是如何解决IE6不支持position:fixed;属性的办法. 如果我们需要做某个元素始终位于浏览器的底部,不会因为浏览器窗口的缩 ...

  4. css 兼容 position:fixed

    我是头 我是主体 有多少内容,我就有多高   我是脚 我要随滚动条滚动 我要随滚动条滚动 我要随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHT ...

  5. 记录一些实用的小技巧-CSS篇

    1.单行文本截断 .text{ width: 200px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } 2.多行 ...

  6. 移动端web页面使用position:fixed问题

    在做移动端项目时,碰到一个很纠结的问题,头部固定的问题,一开始使用fixed,发现一系列的问题, 问题1:footer输入框 focus 状态,footer 被居中,而不是吸附在软键盘上部. 测试环境 ...

  7. 移动端采坑：Position: fixed 在Safari上的Bug

    Position: fixed 在IOS上的显示效果 会出现两种情况: 点击fixed定位的元素会出现fixed定位失效导致的元素贴向底部,即position: absolute,bottom: 0p ...

  8. 移动端web页面使用position:fixed问题总结

    近期完成了一个新的项目(搜狐直播),其中又涉及到了 fixed(固定位置定位)的问题,在之前的文章<移动Web产品前端开发口诀——“快”>中已经阐述过我对 iScroll 的态度,所以在这 ...

  9. 父节点使用css的transform: translate(0, 0)时position:fixed在chrome浏览器中无效

    今天在做移动端的页面,无意间发现了一个Chrome浏览器下的一个bug,在使用CSS3的transform: translate(0, 0)属性对节点A进行位置转化,此时A节点下面有一个字节点B,节点 ...

随机推荐

  1. 记一次B站答题经历

    第一题部分:社区规范卷 --------- ------------ 第二题:社区规范第二部分 -------------------- 第三部分自由选择题 --------------------- ...

  2. Hadoop基础-配置历史服务器

    Hadoop基础-配置历史服务器 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.  Hadoop自带了一个历史服务器,可以通过历史服务器查看已经运行完的Mapreduce作业记录,比 ...

  3. 网络编程基础【day09】：实现简单地ssh（四）

    本节内容 概述 简单ssh socket接收大数据的困惑 一.概述 我们用过linux的就知道什么是ssh,它是一种客户端和服务端交互返回的一个解决,输入一个命令,给我返回什么,接下来我们说一说,如何 ...

  4. springboot整合activiMQ

    首先说明: 队列queue  的特点就是,许多人可以监听它,但是只有一个人能够收到消息. 主题topic    的特点就是,许多人监听它,都能收到消息. 需要安装activiMQ在自己的电脑上.启动方 ...

  5. Hbase记录-HBase增删改查

    HBase创建数据   本章将介绍如何在HBase表中创建的数据.要在HBase表中创建的数据,可以下面的命令和方法: put 命令, add() - Put类的方法 put() - HTable 类 ...

  6. 转- --python 3 编码

    对Python3编码的整理!!! py编码终极版 说起python编码,真是句句心酸.算起来,反复折腾两个来月了.万幸的是,终于梳理清楚了.作为一个共产主义者,一定要分享给大家.如果你还在因为编码而头 ...

  7. python学习笔记9-单元测试unittest

    Python中有一个自带的单元测试框架是unittest模块,用它来做单元测试,它里面封装好了一些校验返回的结果方法和一些用例执行前的初始化操作. 在说unittest之前,先说几个概念: TestC ...

  8. JAVA 动态代理学习记录

    打算用JAVA实现一个简单的RPC框架,看完RPC参考代码之后,感觉RPC的实现主要用到了两个方面的JAVA知识:网络通信和动态代理.因此,先补补动态代理的知识.---多看看代码中写的注释 参考:Ja ...

  9. IO流总结笔记一

    ​ IO流继承关系图 IO概述 IO流是用来处理设备上数据的输入输出. 具体设备有:硬盘,内存,键盘录入等等. IO流的具体分类: 1,根据处理的数据类型不同分为:字节流和字符流,字节流读取的最小单位 ...

  10. java工程师之旅-一个月工作心得

    不知不觉,在工作中已经度过一个月,距离上次写文章已经好几个月了,正好还有二十分钟下班,抽点时间来写一下博文,写一下心得. 首先说一下,在我工作之前,做了一个项目,和一个外校大四的学生做一个毕业设计,一 ...