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

Posted 2020-09-23 凉紫筱

　　移动布局经常会使用绝对定位(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;}

后续更新中