移动端输入框获取焦点后，虚拟键盘弹起，把固定的底部也顶起来了，如何解决呢

Question

如题，如图所示，应该如何完美解决呢

Answer 1

虚拟键盘弹起隐藏底部，反之显示，可通过监听输入框聚焦(onfocus)，失焦(onblur)事件实现

Answer 2

这是移动端布局的坑，把你的内容包起来加
.main {

  position: fixed;
  top: 0px;
  bottom: 50px;
  overflow-y: scroll;

}

Answer 3

    /*屏幕的高度*/
    let winHeight = window.innerHeight
    window.addEventListener('resize', function() {
      if (winHeight > window.innerHeight) {
        /*安卓手机当键盘弹起时设置页面的高度为屏幕的高度*/
        document.getElementsByTagName('body')[0].setAttribute('height', winHeight+'px')
      }else {
        /*当键盘收起时*/
        document.getElementsByTagName('body')[0].setAttribute('height', '100%')
      }
    })

试试看。