本文主要是介绍ios下输入框input进行fixed定位 bug，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在做移动端开发时，经常会遇到，弹窗框内有input输入框，这可以说与ios相爱相杀了。
一个很让人头疼的问题，就是ios下面的input输入框fixed定位。
1、先来看代码结构
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>评选最受欢迎场馆</title>
<style>.box {width: 100%;height: 100%;overflow-y: auto;}.footer {position: fixed;left: 0;bottom: 0;width: 100%;}
</style></head>
<body>
<div id="box"><ul><li>aaaaaaaa</li><li>aaaaaaaa</li><li>aaaaaaaa</li><li>aaaaaaaa</li><li>aaaaaaaa</li></ul><div class="footer"><input type="text"/><div>
</div></body>
</html>写完后，我们在移动端进行调试，发现安卓是正常的，但是ios 会出现下面的情况
2、现在我们来探究一下出现这个问题的原因。根据网上各路大神的说法，试了不少。总结起来，就是当软键盘唤起后，页面的fixed会失效，变成absolute，结果就是当屏幕数据超过一屏时，滑动页面，input框也会跟着一起滚动。
解决：也就是说，如果使用fixed的父元素数据不超过一屏，禁止滚动，那么即使变成了absolute页面也不会有什么变化。那么我们可以，把结构改成，在body里面分为两个部分，需要滚动的部分移动到，<div class="content"></div>,需要定位的部分，单独写一个<div class="footer"></div>：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>ios input聚焦fixed定位</title>
<style>.content {
//内容进行absolute定位，内部滚动position: absolute;left: 0;top: 0;right: 0;bottom: 0;overflow-y: auto;-webkit-overflow-scrolling: touch; //解决ios下滚动不流畅的问题
}
.footer {position: fixed;left: 0;bottom: 0;width: 100%;height: 34px;
}
</style></head>
<body>
<div class="content"><ul><li>aaaaaaaa</li><li>aaaaaaaa</li><li>aaaaaaaa</li><li>aaaaaaaa</li><li>aaaaaaaa</li></ul>
</div>
<div class="footer"><input type="text"></div></body>
</html>要提醒一下，content 和 footer 要直接写在body底下，如果他们两个外面还有一层div，那样布局是无效得。
这样就可以解决上面得问题，并且输入框是一直贴着软键盘得。
但是当软键盘唤起，这个时候滚动页面，input还是会随着页面滚动。不过，解决到这个程度也算能用了。
至于滚动，如果有大神解决掉的话，麻烦@一下小菜
这篇关于ios下输入框input进行fixed定位 bug的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
