在移動端 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.clientHeightvar view = document.getElementById('view')
　　view.style.height = load 'px'

}

?

我們想要的效果如下圖:

?

總結

以上是生活随笔為你收集整理的移动端 fixed 固定按钮在屏幕下方，然后按钮被键盘顶上来...顶上来了有没有~的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。