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

问题描述

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

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

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

1 2 3 4 5 6 7 8 9 10 11

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

解决方法二、flex布局

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

//样式 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; } //结构 dsadasdsadsadsadasdsadasdsadasdsaddsadasdsadsadsadasdsadasdsadasdsad