移动端h5软键盘压缩空间 按钮上移覆盖输入框怎么处理

正常情况下

未输入时： 

输入时： 

我们发现了，ios机子上可以自动往上挪移，而android不行，因此，我们需要对android做兼容。

怎样做才能让按钮不覆盖手机验证码输入框呢？

我们可以为整个容器设置一个min-height最低高度，当软键盘出现占用空间时，当最小高度足够容纳除软键盘之外的所有页面元素时，按钮自然不会再上移覆盖掉输入框了，而是会出现滚动。 

.flex_container {
  width: 100%;
  height: 100%;
  min-height: 10rem; // 最小高度
  position: absolute;
  top: 0;
  bottom: 0;
  background: white;
}

修复好后如下2张图，第二张可以看到右侧的滚动条了：