问题描述
问题：手机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>
