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

標籤：定位   移動   按鈕   需要   .com   固定   fun   ack   mil   

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

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

解決方案:

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

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

css

 

body,html {    height       : 100%;}#view {    width        : 100%;    height       : 100%;    position     : relative;}.watch {    width        : 96% ;    height       : 30px;    padding      : 0 2%;    border       : 1px solid #00a5ba;    outline      : none;    border-radius: 4px ;    overflow-y   : auto;}.fixed-btn {    width        : 92% ;    height       : 40px;    background   : #00a5ba;    border-radius: 4px ;    /*position     : fixed;*/    position     : absolute;    bottom       : 20px;    left         : 4%  ;}

 

html

 

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

 

js

 

var load = document.body.clientHeightvar view = document.getElementById(‘view‘)window.onload = function () {    view.style.height = load + ‘px‘}

 

我們想要的效果如:

 

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