两种解决方案，一种是将内容区域放在中间部分，只是中间部分在滚动（还是固定在底部）；另一种是判断当是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. ES增删改查入门1

    1.RESTful接口使用方法 为了方便直观我们使用Head插件提供的接口进行演示,实际上内部调用的RESTful接口. RESTful接口URL的格式: http://localhost:9200/ ...

  2. 微信小程序里使用 Redux 状态管理

    微信小程序里使用 Redux 状态管理 前言 前阵子一直在做小程序开发,采用的是官方给的框架 wepy , 如果还不了解的同学可以去他的官网查阅相关资料学习:不得不说的是,这个框架确相比于传统小程序开 ...

  3. 让你迅速了解redis

    (1)什么是redis? Redis 是一个基于内存的高性能key-value数据库. (2)Reids的特点 Redis本质上是一个Key-Value类型的内存数据库,很像memcached,整个数 ...

  4. tween.js 插件

    1.是什么? jQueryTween是一款轻量级的jQuery补间动画工具库插件.使用jQueryTween可以制作出各种平滑的动画过渡效果.该插件基于tween.js,旨在简化各种补间动画操作,提供 ...

  5. poi3.8随记

    System.out.println(sheet.getFirstRowNum());//结果是0 System.out.println(sheet.getLastRowNum());//如果一共有3 ...

  6. artTemplate教程

    artTemplate教程 官方文档 一个简单的例子 <!DOCTYPE html> <html lang="zh"> <head> <m ...

  7. python 生成随机图片验证码

    1.安装pillow模块 pip install pillow (1)创建图片 from PIL import Image #定义使用Image类实例化一个长为400px,宽为400px,基于RGB的 ...

  8. 利用ASP.NET里自带的站点地图工具制作网站站点地图

    站点地图很方便能快速给我们导航我们要去访问的地址,能按层级关系分门别类,给用户一个很好的用户体验,很好的看到自己当前所在的网站位置 站点地图,又称网站地图,它就是一个页面,上面放置了网站上所有页面的链 ...

  9. win2008 配置TLS1.2

    配置TLS1.2 提供两种方法, 选择其中一种就行了 1.手动设置 找到HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\SecurityProv ...

  10. innerHTML动态添加html代码和脚本兼容性问题处理方法

    给某个元素的innerHTML赋值,并使得值中的js代码有效(兼容多个浏览器) 症状:给某个元素的 innerHTML 设置值时,如果提供的 HTML 代码中包含js脚本,很多时候这些脚本无效,或者在 ...