两种解决方案，一种是将内容区域放在中间部分，只是中间部分在滚动（还是固定在底部）；另一种是判断当是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. 使用java的 htpUrlConnection post请求 下载pdf文件，然后输出到页面进行预览和下载

    使用java的 htpUrlConnection post请求 下载pdf文件,然后输出到页面进行预览和下载 2018年06月07日 10:42:26 守望dfdfdf 阅读数:235 标签: jav ...

  2. C语言中的重定向输入

    所谓重定向输入,就是不用从键盘一组一组的输入数据,而是保存为一个文件,直接将该程序的测试数据进行输入即可:使用freopen()函数会将标准输入stdin重定向到文件input.txt(这个文件名自己 ...

  3. python面试题——爬虫相关

    1.接触过几种爬虫模块 urllib.requests这两种爬虫模块. 2.robots协议是什么? 它就是一个防君子不防小人的协议,网站有一些数据不想被爬虫程序爬取,可以编写robots协议文件,明 ...

  4. Vue.js - Day3

    定义Vue组件 什么是组件: 组件的出现,就是为了拆分Vue实例的代码量的,能够让我们以不同的组件,来划分不同的功能模块,将来我们需要什么样的功能,就可以去调用对应的组件即可: 组件化和模块化的不同: ...

  5. PHP与redis的操作

    String 类型操作 string是redis最基本的类型,而且string类型是二进制安全的.意思是redis的string可以包含任何数据.比如jpg图片或者序列化的对象   $redis-&g ...

  6. TP5.0搭建restful API 应用

    1.配置环境变量,如果没配置会显示如下错误. 配置方法 1)右键此电脑-> 属性-> 高级系统设置->环境变量->Path 2)在Path后加上php目录的名称 如:E:\PH ...

  7. (C# 基础) 静态字段，静态类，静态方法。

    静态字段被类的所有实例所共享,即此类的所有实例都访问同一内存地址. 所以该内存位置的值变更的话,这种变更对所有的实例都可见. class MyClass { ; ; public void SetVa ...

  8. MVC 默认路由 Areas

    1.使用重名controller 在asp.net mvc2以后的版本里面,有了area(区域的概念),这为我们开发中提供了不少方便的地方,但是很不凑巧,若是存在多个重名的controller就会发生 ...

  9. adobe air ane 中有的java class 打包 apk 后却没有了报NoClassDefFoundError ，ClassNotFoundException

    apache flex sdk 手机项目 09-18 10:34:55.030: E/AndroidRuntime(19513): FATAL EXCEPTION: main 09-18 10:34: ...

  10. Struts2_Struts标签大致内容

    Struts-Tags1.通用标签 a) property b) set i.默认为 action scope,会将值放入 request 和 ActionContext中 ii. page.requ ...