7792325-779f77cd7628ed6c.png
可见，键盘遮盖住了这个输入框，而且此时不能滚动，而按钮的设计为始终置底置底的按钮为fixed布局，观察得知，这样当键盘弹起时，其实页面的高度被缩短成类似于这样
键盘区域.png
这样，始终置底的元素会遮盖住输入框，并且由于界面并没有长到可以滚动的地步，输入框非常正常地被遮住了
解决办法第一种（兼容性优先）
首先，把置底元素设置成，在页面的底部而非屏幕的底部
.page .bottom {
position: absolute;
bottom: 0;
width: 100%;
border: 0;
text-align: center;
z-index: 5;
}
然后，设置页面的高度，让按钮有置底的效果
.page {
background: #fff;
color: #384369;
position: relative;
width: 100%;
overflow-y: auto;
height: 100vh;
min-height: 480px;
}
注意有最小高度，因为当键盘弹起时，100vh是缩小的那部分的高度，而不是屏幕高度如果有大屏的需求，适配一下就好
这样，当键盘弹起时，内容就是可以滚动的了，出于用户体验的需求，可以在focus输入框的时候，把滚动条划一下，露出输入框
function whenFocus(){
document.body.scrollTop =
document.documentElement.scrollTop =86; //具体的数值可以在调整
}
第二种兼容性优先
<div class="main">
<div class="content"></div>
<button></button>
</div>
设置content为 overflow: auto;
让content的高度为 100vh-buttonHeight
vh: 相对于视窗的高度, 视窗被均分为100单位的vh;
第三种（flex布局）
使用第二种的html
.main{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
.content {
overflow: auto;
}
}
第四种利用window.resize方法
利用window.resize方法，这个方法的特性是：当调整浏览器窗口的大小时，发生 resize 事件。
data(){
return{
screenHeightNoChange: true,
}
},
mounted() {
const self = this;
window.onresize = () => {
if (self.oldFullHeight) {
self.screenHeightNoChange = document.documentElement.clientHeight === self.oldFullHeight;
console.log(' self.screenHeightNoChange ' + self.screenHeightNoChange);
}
};
},
screenHeightNoChange==true的时候使用方法三，当==false的时候，将button变成position:relative; 就能解决问题了
