之前的项目一直都有这个问题，不管是微信端还是用webview打包成app，今天下定决心要解决这个问题。
经测试发现，底部菜单（footer）被顶起来的原因，是手机开启键盘之后，“浏览器”的高度发生了变化，而底部菜单的position属性是fixed，所以就出现在底部了。
因此对应的解决方案是，监听“浏览器”高度，当产生变化时，隐藏底部菜单。
document.body.clientHeight 指的是body对象高度
document.documentElement.clientHeight 指的是可见区域高度，此处用它
我用的是vue，将footer封装了个组件
先在data里定义几个字段
data: function(){
return {
screenHeight: document.documentElement.clientHeight, // 当前高度
originHeight: document.documentElement.clientHeight, //默认高度，用作比较
isOriginHeight: false //当前高度是否仍等于默认高度
};
}
在html中，通过 isOriginHeight 字段控制隐藏/显示footer
<div class="footer" v-show="isOriginHeight">
...
</div>
在模板挂载完成后，添加【浏览器窗口改变时触发函数】给 screenHeight 字段赋值
mounted() {
window.onresize = () => {
return (() => {
this.screenHeight = document.documentElement.clientHeight;
})()
}
}
监听watch变化，判断高度是否改变，改变isOriginHeight 字段
watch: {
screenHeight (val) {
if(this.originHeight - val>60) { //这里以防万一改了下判断形式，当屏幕高度减少了60px以上时才隐藏footer
this.isOriginHeight = false;
}else{
this.isOriginHeight = true;
}
}
}
以上
不用vue的小伙伴可以参考这个思路
目前为止这个方法暂时还没遇到问题，有遇到问题的小伙伴可以评论交流
