正常情况下
未输入时:
输入时:
我们发现了,ios机子上可以自动往上挪移,而android不行,因此,我们需要对android做兼容。
怎样做才能让按钮不覆盖手机验证码输入框呢?
我们可以为整个容器设置一个min-height最低高度,当软键盘出现占用空间时,当最小高度足够容纳除软键盘之外的所有页面元素时,按钮自然不会再上移覆盖掉输入框了,而是会出现滚动。
.flex_container {
width: 100%;
height: 100%;
min-height: 10rem; // 最小高度
position: absolute;
top: 0;
bottom: 0;
background: white;
}
修复好后如下2张图,第二张可以看到右侧的滚动条了: