解决移动端两端布局的input+fixed的bug-CSDN博客

在移动端布局中，会经常出现固定在手机上下两端的页面。

但是fixed定位和软键盘碰上之后，会碰到各种的坑，ios和android上都会遇到。

下面就分享一下如何解决此问题，代码实例如下:

 
       <!DOCTYPE html> 
      
 
       < 
       html 
       lang 
       = 
       "en" 
       > 
      
 
       < 
       head 
       > 
      
 
       < 
       meta 
       charset 
       = 
       "UTF-8" 
       > 
      
 
       < 
       meta 
       name 
       = 
       "viewport" 
       content 
       = 
       "width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" 
       > 
      
 
       < 
       title 
       >蚂蚁部落</ 
       title 
       > 
      
 
       </ 
       head 
       > 
      
 
       < 
       body 
       > 
      
 
          
       < 
       div 
       class 
       = 
       "main" 
       > 
      
 
            
       < 
       p 
       >可以用手机看看</ 
       p 
       > 
      
 
            
       < 
       p 
       >test</ 
       p 
       > 
      
 
            
       < 
       p 
       >软键盘出来后</ 
       p 
       > 
      
 
            
       < 
       p 
       >test</ 
       p 
       > 
      
 
            
       < 
       p 
       >foot是否会错位~</ 
       p 
       > 
      
 
            
       < 
       p 
       >test</ 
       p 
       > 
      
 
            
       < 
       p 
       >test</ 
       p 
       > 
      
 
            
       < 
       input 
       type 
       = 
       "text" 
       placeholder 
       = 
       "我是一个输入框" 
       > 
      
 
            
       < 
       input 
       type 
       = 
       "text" 
       placeholder 
       = 
       "用手机点我啊" 
       > 
      
 
          
       </ 
       div 
       > 
      
 
          
       < 
       div 
       class 
       = 
       "foot" 
       > 
      
 
            
       copyright by linyang 
      
 
          
       </ 
       div 
       > 
      
 
       </ 
       body 
       > 
      
 
       </ 
       html 
       > 
      