本文共 945 字，大约阅读时间需要 3 分钟。

在做移动端开发时，经常会遇到，弹窗框内有input输入框，这可以说与ios相爱相杀了。

一个很让人头疼的问题，就是ios下面的input输入框fixed定位。

1、先来看代码结构 

   
   
    
    
        
     
aaaaaaaa
                
     
aaaaaaaa
                
     
aaaaaaaa
                
     
aaaaaaaa
                
     
aaaaaaaa
    
    
    
    
        
         
     
    
   

写完后，我们在移动端进行调试，发现安卓是正常的，但是ios 会出现下面的情况

2、现在我们来探究一下出现这个问题的原因。根据网上各路大神的说法，试了不少。总结起来，就是当软键盘唤起后，页面的fixed会失效，变成absolute，结果就是当屏幕数据超过一屏时，滑动页面，input框也会跟着一起滚动。

解决：也就是说，如果使用fixed的父元素数据不超过一屏，禁止滚动，那么即使变成了absolute页面也不会有什么变化。那么我们可以，把结构改成，在body里面分为两个部分，需要滚动的部分移动到，<div class="content"></div>,需要定位的部分，单独写一个<div class="footer"></div>：

   
   
    
    
        
     
aaaaaaaa
        
     
aaaaaaaa
        
     
aaaaaaaa
        
     
aaaaaaaa
        
     
aaaaaaaa
    
    
   
   
    
   

要提醒一下，content 和 footer 要直接写在body底下，如果他们两个外面还有一层div，那样布局是无效得。

这样就可以解决上面得问题，并且输入框是一直贴着软键盘得。

但是当软键盘唤起，这个时候滚动页面，input还是会随着页面滚动。不过，解决到这个程度也算能用了。

至于滚动，如果有大神解决掉的话，麻烦@一下小菜