問(wèn)題描述
問(wèn)題：手機(jī)H5頁(yè)面當(dāng)input輸入框獲取焦點(diǎn)時(shí)，軟鍵盤會(huì)彈起，這時(shí)：IOS底部固定定位的按鈕不會(huì)隨著鍵盤彈起而彈起产上；而安卓底部固定定位的按鈕會(huì)跟隨軟鍵盤彈起而頂起棵磷，從而遮擋一部分視圖
解決方法一、監(jiān)聽(tīng)window的resize事件晋涣，控制顯示隱藏
此方法只對(duì)安卓有用仪媒，iOS沒(méi)有監(jiān)聽(tīng)window的resize事件（iOS的話還是用flex布局比較好）
// 獲取視圖原始高度
let screenHeight = document.body.offsetHeight
// 為window綁定resize事件
window.onresize = function () {
let changeHeight = document.body.offsetHeight
if (changeHeight < screenHeight) {
// 隱藏被彈起的固定定位
} else {
// 顯示
}
}
解決方法二、flex布局
將屏幕分為上下兩部分谢鹊，主體為一部分算吩，底部一部分，主體部分設(shè)置為flex:1,overflow: scroll;內(nèi)容在主體內(nèi)滑動(dòng)佃扼，底部固定不動(dòng)
//樣式
html,body {
height: 100%;
width: 100%;
}
.container {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
//需要滑動(dòng)的主體內(nèi)容設(shè)置為flex:1;overflow: scroll,這樣當(dāng)內(nèi)容超出時(shí)只會(huì)在主體內(nèi)滑動(dòng)赌莺，而不會(huì)被底部固定的部分影響
.main {
flex:1;
width: 100%;
background-color:pink;
overflow: scroll;
}
//需要固定不動(dòng)的部分設(shè)置固定的高，
.foot {
height: 200px;
width: 100%;
background-color: #000;
}
//結(jié)構(gòu)
<div class="container">
<div class="main">
<p>dsadasdsadsadsadasdsadasdsadasdsaddsadasdsadsadsadasdsadasdsadasdsad</p>
</div>
<div class="foot">
</div>
</div>
