两种解决方案，一种是将内容区域放在中间部分，只是中间部分在滚动（还是固定在底部）；另一种是判断当是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. asp.net core 2.1 生成swagger文档

    新建asp.netcore2.1 api项目 “WebApplication1” 在nuget管理器中添加对Swashbuckle.AspNetCore 3.0.0.Microsoft.AspNetC ...

  2. yield关键字的使用

    yield的中文是什么意思呢? 在金山词霸上面的翻译是: vt.屈服,投降: 生产: 获利: 不再反对 vi.放弃,屈服: 生利: 退让,退位 n.产量,产额: 投资的收益: 屈服,击穿: 产品 个人 ...

  3. Mybatis通用Mapper(转)

    转自:http://blog.csdn.net/isea533/article/details/41457529 极其方便的使用Mybatis单表的增删改查 项目地址:http://git.oschi ...

  4. iOS沙盒(sandbox)机制及获取沙盒路径

    一.每个iOS应用SDK都被限制在沙盒中,沙盒相当于一个加了仅主人可见权限的文件夹,苹果对沙盒有以下几条限制. (1).应用程序可以在自己的沙盒里运作,但是不能访问任何其他应用程序的沙盒. (2).应 ...

  5. SQLSERVER 2008 R2 事务日志已满

    方法一: USE [master] GO ALTER DATABASE DNName SET RECOVERY SIMPLE WITH NO_WAIT GO ALTER DATABASE DNName ...

  6. python模块详解 XML

    XML模块 XML是实现不同语言或程序之间进行数据交换的协议,和json一样. XML格式: <?xml version="1.0" encoding="UTF-8 ...

  7. C#面向对象几组关键字的详解（this,base,dynamic,var,const,readonly,is,as）

    × 目录 [1]this和base的区别 [2]var和dynamic的区别 [3]const和readonly的区别 [4]is和as的区别 这几个关键字,在用法上有许多相似之处.这里主要看看细节之 ...

  8. C++ new new[]详解

    精髓: operator new()完成的操作一般只是分配内存:而构造函数的调用(如果需要)是在new运算符中完成的. operator new和new 运算符是不同的,operator new只分配 ...

  9. 2016 Multi-University Training Contest 4 - 1005 (hdu5768)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5768 题目大意:给你区间[L,R],问你[L, R]中有多少个数字x满足x%7=0且x%p[i]≠a[ ...

  10. jQuery实现网页右下角悬浮层提示

    最近有同事提到类似网页右下角的消息悬浮提示框的制作.我之前也做过一个类似的例子,很简单.是仿QQ消息.现在感觉之前的那个例子只是说了实现原理,整体上给你的感觉还是太丑,今天为大家带来一个新的例子.是D ...