首页 > 代码库 > 移动端input的虚拟键盘影响布局

移动端input的虚拟键盘影响布局

  移动布局经常会使用绝对定位(absolute)和固定定位(fixed)来布局一个层。然后这个层上面会有一些信息,当这个层上面为input时,移动端输入信息则会弹出虚拟键盘,从而会影响我们的布局,给我们带来困扰。经常碰到却很少整理,再次碰到又是一头雾水,趁着这次有空,我把我测试成功的方法记录下来。具体看自己情况应用,纯属个人试验。

情况一、用absolute写的一个层(class名为elayer),层设置有背景颜色,然后层上面布局有input。当点击input软键盘弹出后,这个层向上面移动背景随之向上,然后下面会有部分空白,背景为默认色不是所设置的背景色。原来设置如下:

.evalLayer{position:absolute;width:100%;height:100%;background:rgb(81,79,97);top:0;left:0;z-index:11;}

  解决如下:

.eLayer{position:absolute;width:100%;min-height:100%;bottom:0;background:rgb(81,79,97);top:0;left:0;z-index:11;overflow-y:auto;}

后续更新中

  

移动端input的虚拟键盘影响布局