可見吵聪，鍵盤遮蓋住了這個(gè)輸入框劲装，而且此時(shí)不能滾動(dòng)胧沫，而按鈕的設(shè)計(jì)為始終置底置底的按鈕為fixed布局，觀察得知酱畅，這樣當(dāng)鍵盤彈起時(shí)琳袄，其實(shí)頁(yè)面的高度被縮短成類似于這樣
這樣，始終置底的元素會(huì)遮蓋住輸入框纺酸，并且由于界面并沒有長(zhǎng)到可以滾動(dòng)的地步窖逗，輸入框非常正常地被遮住了
解決辦法第一種（兼容性優(yōu)先）
首先，把置底元素設(shè)置成餐蔬，在頁(yè)面的底部而非屏幕的底部
.page .bottom {
position: absolute;
bottom: 0;
width: 100%;
border: 0;
text-align: center;
z-index: 5;
}
然后碎紊，設(shè)置頁(yè)面的高度，讓按鈕有置底的效果
.page {
background: #fff;
color: #384369;
position: relative;
width: 100%;
overflow-y: auto;
height: 100vh;
min-height: 480px;
}
注意有最小高度樊诺，因?yàn)楫?dāng)鍵盤彈起時(shí)仗考，100vh是縮小的那部分的高度，而不是屏幕高度如果有大屏的需求词爬，適配一下就好
這樣秃嗜，當(dāng)鍵盤彈起時(shí)，內(nèi)容就是可以滾動(dòng)的了顿膨，出于用戶體驗(yàn)的需求锅锨，可以在focus輸入框的時(shí)候，把滾動(dòng)條劃一下恋沃，露出輸入框
function whenFocus(){
document.body.scrollTop =
document.documentElement.scrollTop =86; //具體的數(shù)值可以在調(diào)整
}
第二種兼容性優(yōu)先
<div class="main">
<div class="content"></div>
<button></button>
</div>
設(shè)置content為 overflow: auto;
讓content的高度為 100vh-buttonHeight
vh: 相對(duì)于視窗的高度, 視窗被均分為100單位的vh;
第三種（flex布局）
使用第二種的html
.main{
height: 100vh;
display: flex;
flex-direction: column;
justify-content: space-between;
.content {
overflow: auto;
}
}
第四種利用window.resize方法
利用window.resize方法必搞，這個(gè)方法的特性是：當(dāng)調(diào)整瀏覽器窗口的大小時(shí)，發(fā)生 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的時(shí)候使用方法三恕洲，當(dāng)==false的時(shí)候，將button變成position:relative; 就能解決問題了
