你的位置:首页 > 软件开发 > 网页设计 > ios解决输入框弹出后position:fixed失效问题

ios解决输入框弹出后position:fixed失效问题

发布时间:2015-12-02 16:00:43
最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题。position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激活时,会出现位置错位的问题。如下图:受到CSDN上刘华童鞋(http://my. ...

最近在使用AmazeUI进行仿App Mobile Web开发时遇到了讨论众多的position:fixed问题。position:fixed在安卓2.2以上已经实现,但是在ios8以下系统当小键盘激活时,会出现位置错位的问题。

如下图:

ios解决输入框弹出后position:fixed失效问题

受到CSDN上刘华童鞋(http://my.csdn.net/liu__hua)的启发,找到了目前位置比较完美的解决方案。

<!DOCTYPE html><html lang="zh_cmn"><head><meta charset=utf-8 /><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /><meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" /><title></title><style>.head,.foot{position:fixed;left:0;height:38px;line-height:38px;width:100%;background-color:#99CC00;}.head{top:0;}.foot{bottom:0;}.main{position:fixed;top:38px;bottom:38px;width:100%;overflow:scroll;background-color:#BABABA;}</style></head><body><header class="head">顶部固定区域</header><article class="main" id="wrapper">   <div>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>  <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>   <p>当内容欲出隐藏时,灰**域可上下拖动</p>  <input type="text" value="" class="inputtext"> <br>    <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br> <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>   <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>  <input type="text" value="" class="inputtext"> <br>   content <br>  content <br>  content <br>  content <br>  content <br>  content <br>  content <br>  content <br>  content <br> </div></article><footer class="foot">底部固定区域</footer></body></html>

原标题:ios解决输入框弹出后position:fixed失效问题

关键词:IOS

IOS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。