ios常见fixed的问题

第一种常见的问题：input获取焦点后，头部或者底部使用了fixed的话，会乱跑的现象，如下图

解决问题：

<!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{ -webkit-overflow-scrolling: touch;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 /> 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>
View Code

 

posted @ 2017-06-27 17:36  sure2016  阅读(267)  评论(0)    收藏  举报