解决html页面中含有input输入框fixed布局底部按钮在Android和ios中被弹起的问题
html页面在安卓或ios中fixed 页面底部的按钮常常会被弹起,如图,当input获取焦点唤起软键盘的时候,下一步按钮被悬在半空中,那么如何解决呢?
起初,顶部餐饮商家头部是fixed在顶部,下一步按钮fixed在页面底部,滑动中间内容部分的时候,头部和底部是固定不动的。但是当input获取焦点唤起软键盘的时候,下一步按钮会悬在半空中,所以我采用position:absolute来模拟fixed布局。
注意:是头部底部和中间内容区域都采用absolute布局,中间内容区域滚动overflow:scroll。实际上整个body并没有滚动,而是中间内容区域在滚动。
html部分
<!-- 顶部-->
<nav id="nav"> </nav>
<!-- 中间滚动内容区 -->
<div class="main"> </div>
<!-- 底部按钮 -->
<footer id="finishi"></footer>
style部分
#nav{position:absolute;top:0;left:0;width:100%;height:1rem;}
.main{position:absolute;top:1rem;bottom:1rem;overflow-y:scroll;width:100;-webkit-overflow-scrolling: touch;}
#finishi{position:absolute;bottom:0;left:0;width:100%;height:1rem;}
在ios中overflow-y:scroll会出现卡顿现象,此时的解决办法是在内容滚动部分的css中加-webkit-overflow-scrolling: touch;就会非常流畅了。