input输入框获取焦点后，底部固定定位的按钮顶起问题

问题描述

问题：手机H5页面当input输入框获取焦点时，软键盘会弹起，这时：IOS底部固定定位的按钮不会随着键盘弹起而弹起；而安卓底部固定定位的按钮会跟随软键盘弹起而顶起，从而遮挡一部分视图

解决方法一、监听window的resize事件，控制显示隐藏

此方法只对安卓有用，iOS没有监听window的resize事件（iOS的话还是用flex布局比较好）

// 获取视图原始高度
let screenHeight = document.body.offsetHeight   
// 为window绑定resize事件
window.onresize = function () {
      let changeHeight = document.body.offsetHeight
      if (changeHeight < screenHeight) {
        // 隐藏被弹起的固定定位
      } else {
        // 显示
      }
    }

解决方法二、flex布局

将屏幕分为上下两部分，主体为一部分，底部一部分，主体部分设置为flex:1,overflow: scroll;内容在主体内滑动，底部固定不动

//样式
html,body {
        height: 100%;
        width: 100%;
    }
.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

//需要滑动的主体内容设置为flex:1;overflow: scroll,这样当内容超出时只会在主体内滑动，而不会被底部固定的部分影响
.main {
        flex:1;
        width: 100%;
        background-color:pink;
        overflow: scroll;
    }

//需要固定不动的部分设置固定的高，
.foot {
    height: 200px;
    width: 100%;
    background-color: #000;
}

//结构
<div class="container">
    <div class="main">
        <p>dsadasdsadsadsadasdsadasdsadasdsaddsadasdsadsadsadasdsadasdsadasdsad</p>
    </div>
    <div class="foot">
        
    </div>
</div>