IOS中input与fixed同时存在的情况会出现bug
两种解决方案，一种是将内容区域放在中间部分，只是中间部分在滚动（还是固定在底部）；另一种是判断当是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的更多相关文章
- IOS中input键盘事件支持的解决方法
欢迎大家去我的网站详细查看http://genghongshuo.com.cn/ IOS中input键盘事件keyup.keydown.等支持不是很好, 用input监听键盘keyup事件,在安卓手机 ...
- 解决ios中input兼容性问题
1.解决input输入框在iOS中有阴影问题 input{ -webkit-appearance: none; } 2.checkbox.raido在ios中阴影问题 单选: ...
- ios中input输入无效
项目中一个登陆界面的input在安卓下可以输入,iOS下无法输入,经查询为 设置了-webkit-user-select:none;将其改为-webkit-user-select:auto;修正. 参 ...
- IOS中input光标跑偏问题的解决方法
ios端兼容input光标高度处理 在最近的项目中遇到一个问题,input输入框光标,在安卓手机上显示没有问题,但是在苹果手机上 当点击输入的时候,光标的高度和父盒子的高度一样.造成的原因就是给父盒子 ...
- IOS中input键盘事件keyup 的兼容解决办法
用input监听键盘keyup事件,在安卓手机浏览器中是可以的,但是在ios手机浏览器中很慢,用输入法输入之后,并未立刻相应keyup事件. 解决办法: 在ios设备上可以用html5的input事件 ...
- ios中 input 焦点光标不垂直居中
笔记:在ios,如果同时给input设置这种平时我们使字体垂直居中的css写法. 光标会出现,如下图的问题 . 改正方案: 采取不使用line-height的垂直居中方法即可.
- ios中input获取焦点时的问题
1.获取焦点时,input会变大 解决办法是:font-size设置为32px以上 还有就是要在header里面加这一行代码:<meta name="viewport" co ...
- 解决移动端在IOS中input输入框光标过长
在输入框样式中加入: line-height:20px;
- ios中的任务分段
工作比较忙,蛮久没有写东西了,今天我要写的是ios中的任务分段.大多数的情况下,我们用不到任务分段,但是如果我们是在执行比较频繁的函数或者这个函数是比较耗时, 某一条件下,我要执行新的任务,并且取消上 ...
随机推荐
- POJ 3189——Steady Cow Assignment——————【多重匹配、二分枚举区间长度】
Steady Cow Assignment Time Limit:1000MS Memory Limit:65536KB 64bit IO Format:%I64d & %I ...
- DIV+CSS图片不间断滚动jquery特效(Marquee插件)及移动标签marquee整理
推荐一个jQuery的无缝文字滚动效果,同时也可以滚动图片,也叫做跑马灯效果. 此jquery插件,依托jquery库,能实现各种滚动效果,且让HTML代码符合W3C标准. marquee标签:创建一 ...
- centos系统安装mysql
方式一. 通过yum install mysql-server安装mysql服务器.chkconfig mysqld on设置开机启动,并service mysqld start启动mysql服务,并 ...
- CSS列表(新闻列表、导航条)常见写法
以下面这个UL做演示 <ul> <li><a href="#"><span>2014-4-1</span>教育</ ...
- Design Pattern ->Prototype
Layering & Contract Philosophy With additional indirection Prototype The example code is as foll ...
- Python开发环境Wing IDE之Search in Files工具详解
Search in Files工具是Wing IDE中最强大的搜索选项.它支持磁盘.项目,打开编辑器,或其它文件集的多文件批量搜索.它还可以使用通配符搜索,并可以做基于正则表达式的搜索/替换. 建议用 ...
- Azure杯年会Cosplay大赛，速来围观！
又是一年年会时,正值各家公司红人纷纷登场之际,Azure 自然也不会缺席.我们今年的主题是:Azure 杯年会 Cosplay,秀出你最爱的角色! 在过去的一年中,Azure 智能云取得了长足的发展, ...
- Spring MVC框架下提交Date数据无法在controller直接接收
主要有两步,controller中添加initBinder方法,再创建一个时间类型数据转换类就OK了. 1.在Controller中创建方法: // 相关包 import java.text.Date ...
- Altium_Designer-各种布线总结
1.常规布线:不详细说了,是个人就知道怎么弄.需要说明的是在布线过程中,可按小键盘的*键或大键盘的数字2键添加一个过孔:按L键可以切换布线层:按数字3可设定最小线宽.典型线宽.最大线宽的值进行切换. ...
- Codeforces Round #404 (Div. 2) ABC
A. Anton and Polyhedrons Anton's favourite geometric figures are regular polyhedrons. Note that ther ...