移動端 fixed 固定按鈕在屏幕下方，然后按鈕被鍵盤頂上來...頂上來了有沒有~

在移動端 H5 頁面開發中，我使用了 fixed 固定某個元素在屏幕的最下方，

這時點擊輸入框，接着非常非常自然地出現了元素被系統鍵盤頂起來的情況，如下圖。

解決方案:

首先，給頁面最外層包裹一層 div(相對定位) ，然后頁面渲染完成時給 div 的高度等於 body(document.body.clientHeight) 的高度，

接下來再給需要定位在屏幕下方的元素設置絕對定位即可解決問題。

css

 

body,html {
    height       : 100%;
    margin       : 0;
    padding      : 0;
}
#view {
    width        : 100%;
    height       : 100%;
    position     : relative;
    text-align   : center;
}
.watch {
    width        : 98% ;
    height       : 30px;
    border       : 1px solid #00a5ba;
    outline      : none;
    border-radius: 4px ;
}
.fixed-btn {
    width        : 100%;
    height       : 40px;
    background   : #00a5ba;
    border-radius: 4px ;
    position     : absolute;
    bottom       : 0   ;
    left         : 0   ;
}

 

html

 

<div id="view">
    <input type="text" class="watch">
    <div class="fixed-btn"></div>
</div>

 

js

 

window.onload = function () {

　　var load = document.body.clientHeight
　　var view = document.getElementById('view')
　　view.style.height = load + 'px' 

}

 

我們想要的效果如下圖: