两种解决方案，一种是将内容区域放在中间部分，只是中间部分在滚动（还是固定在底部）；另一种是判断当是ios时，将其转换为absolute定位。（跟随着页面的滚动而滚动）;;

当使用input时，fixed定位的元素就会出现错位。软键盘唤起后，页面的 fixed 元素将失效（即无法浮动，也可以理解为变成了 absolute 定位），所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。
    既然在 iOS 下由于软键盘唤出后，页面 fixed 元素会失效，导致跟随页面一起滚动，那么假如——页面不会过长出现滚动，那么即便 fixed 元素失效，也无法跟随页面滚动，也就不会出现上面的问题了。
    那么按照这个思路，如果使 fixed 元素的父级不出现滚动，而将原 body 滚动的区域域移到 main 内部，而 header 和 footer 的样式不变，代码如下：

<body class="layout-scroll-fixed">
<!-- fixed定位的头部 (absolute绝对定位也可以)-->
<header>

</header>

<!-- 可以滚动的区域 -->
<main>
<div class="content">
<!-- 内容在这里... -->
</div>
</main>

<!-- fixed定位的底部 （absolute绝对定位也可以）-->
<footer>
<input type="text" placeholder="Footer..."/>
<button class="submit">提交</button>
</footer>
</body>
header, footer, main {
display: block;
}

header {
position: fixed;//或者absolute
height: 50px;
left: 0;
right: 0;
top: 0;
}

footer {
position: fixed;//或者写成absolute
height: 34px;
left: 0;
right: 0;
bottom: 0;
}

main {
/* main绝对定位，进行内部滚动 */
position: absolute;
top: 50px;
bottom: 34px;
/* 使之可以滚动 */
overflow-y: scroll;
/* 增加该属性，可以增加弹性，是滑动更加顺畅 */
-webkit-overflow-scrolling: touch;
}

main .content {
height: 2000px;
}

js代码：

$("input").on("focus",function(){
this.scrollIntoView();//解决android软键盘遮住input框问题
})

IOS中input与fixed同时存在的情况会出现bug的更多相关文章

  1. IOS中input键盘事件支持的解决方法

    欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...

  2. 解决ios中input兼容性问题

    1.解决input输入框在iOS中有阴影问题 input{ -webkit-appearance: none; } 2.checkbox.raido在ios中阴影问题 单选:              ...

  3. ios中input输入无效

    项目中一个登陆界面的input在安卓下可以输入,iOS下无法输入,经查询为 设置了-webkit-user-select:none;将其改为-webkit-user-select:auto;修正. 参 ...

  4. IOS中input光标跑偏问题的解决方法

    ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...

  5. IOS中input键盘事件keyup 的兼容解决办法

    用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件 ...

  6. ios中 input 焦点光标不垂直居中

    笔记:在ios,如果同时给input设置这种平时我们使字体垂直居中的css写法. 光标会出现,如下图的问题 . 改正方案: 采取不使用line-height的垂直居中方法即可.

  7. ios中input获取焦点时的问题

    1.获取焦点时,input会变大 解决办法是:font-size设置为32px以上 还有就是要在header里面加这一行代码:<meta name="viewport" co ...

  8. 解决移动端在IOS中input输入框光标过长

    在输入框样式中加入: line-height:20px;

  9. ios中的任务分段

    工作比较忙,蛮久没有写东西了,今天我要写的是ios中的任务分段.大多数的情况下,我们用不到任务分段,但是如果我们是在执行比较频繁的函数或者这个函数是比较耗时, 某一条件下,我要执行新的任务,并且取消上 ...

随机推荐

  1. 【转】Android事件分发机制完全解析，带你从源码的角度彻底理解(下)

    转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/9153761 记得在前面的文章中,我带大家一起从源码的角度分析了Android中Vi ...

  2. c#-day01学习笔记

    C#语言基础 .net之父--------安德斯/海尔斯伯格 .net是一个平台,一个集合,一个环境 .net出现的背景 .net的核心功能:能够在任何的时间,任何的地点,使用任何的设备,访问网络 . ...

  3. 部署Cube报错，用户登录失败；280000

    在创建SSAS项目过程中,创建数据源.数据源视图.多维数据集.纬度等一切都没有问题.但是在“进程”这一步的时候,发现总是报错,提示如下. OLE DB 错误: OLE DB 或 ODBC 错误 : 用 ...

  4. 方法引用（Method reference）和构造器引用（construct reference）

    Java 8 允许你使用 :: 关键字来传递方法或者构造函数引用 方法引用语法格式有以下三种: objectName::instanceMethod ClassName::staticMethod C ...

  5. IT相关术语、缩略词

    CLI Command Line Interface 命令行界面 GUI Graphical User Interface 图形用户界面 IP Internet Protocol 因特网协议 JDK ...

  6. Hibernate课程 初探一对多映射4-2 cascade级联属性

    1 级联属性:hibernate一方和多方设置关联关系,当一方发生相应修改时(见下表),多方不用进行显式修改,也能进行相应修改.   级联在一方和多方xml中都可以设置 属性值 含义和作用 all 对 ...

  7. Spring aop读写分离

    一.采用读写分离技术的目标 随着网站的业务不断扩展,数据不断增加,用户越来越多,数据库的压力也就越来越大,采用传统的方式,比如:数据库或者SQL的优化基本已达不到要求,这个时候可以采用读写分离的策略来 ...

  8. easyui datagrid 动态加载数据 渲染问题，表格错位问题

    $('#dg').datagrid({ url:'datagrid_data.json', columns:[[ {field:'code',title:'Code',width:100}, {fie ...

  9. js之正则表达式（RegExp对象）

    先看一个很有意思的例子: 用字面量的方式定义了一个正则表达式 /\w/g,再重复匹配字符串 ‘ab’ 的时候,出现了结果不唯一的现象. 很多新手都对这种现象感到困惑,难道是正则表达式不稳定吗? 接下来 ...

  10. sharepoint2007就地升级2010系列（四）升级数据库

    上一篇我们完成了系统的升级,今天我们来看一下SQL2005X64是如何升级到SQL2008X64的. 首先,我们先停掉所有sharepoint的服务 其实网上的文档并没有写到这一步,但是我个人觉得,要 ...