两种解决方案，一种是将内容区域放在中间部分，只是中间部分在滚动（还是固定在底部）；另一种是判断当是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. activeMq 配置（一）

    基础知识补充 1.ActiveMQ从入门到精通(一)https://www.jianshu.com/p/ecdc6eab554c 2.ActiveMQ从入门到精通(二)https://www.jian ...

  2. gdb调试汇总

    1. 启动GDB开始调试: (1)gdb program ///最常用的用gdb启动程序,开始调试的方式(2)gdb program core ///用gdb查看core dump文件,跟踪程序cor ...

  3. c# 远程连接sql server 2008问题

    http://hi.baidu.com/lzghxjt/item/d42bd8f7066a3ad86325d280 远程连接不上可以在防火墙新建入站规则

  4. 在基于WCF开发的Web Service导出WSDL定义问题及自定义wsdl:port 名称

             在契约优先的Web服务开发过程中,往往是先拿到WSDL服务定义,各家开发各自的服务实现或客户端,然后互相调用.          尽管Web Service的标准已经发布很多年,但各 ...

  5. guava的重试机制guava-retrying使用

    1,添加maven依赖 <dependency> <groupId>com.github.rholder</groupId> <artifactId>g ...

  6. python的字符串操作

    1.修改大小写 (1)title()以首字母大写的方式显示每个单词,即将每个单词的首字母都改为大写.这很有用, 因为你经常需要将名字视为信息.例如,你可能希望程序将值Ada.ADA和ada视为同一个名 ...

  7. mysql常用的优化措施

    http://www.cnblogs.com/ggjucheng/archive/2012/11/07/2758058.html

  8. extjs 6

    因为最近公司要写一个项目前台所以开始学习extjs前端框架,希望一起共勉. 那么我们的教程就从 Hello World 讲起. helloWorld.js   Ext.onReady(function ...

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

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

  10. C#变量、常量

    变量 一.命名变量:标识符 为变量命名时要遵循C#语言的命名规范: 1.变量名只能由字母.数字和下划线组成,而不能包含空格.标点符号.运算符等其他符号 2.变量名不能与C#中的关键字名称相同   二. ...