app开发点击页面上的输入框吊起键盘后固定在底部的内容被顶在键盘上面

我们在开发的时候一般都有顶部固定个按钮的设计,按钮的样式我们一般都会使用position:fixed;bottom:0的定位

这样当页面上有输入框的时候,我们在点击输入框获取焦点吊起软键盘后固定在底部的元素就会被顶起,

之所以会出现这种情况,是因为软键盘弹出会导致Webview的高度发生变化,进而导致html中元素位置发生变化。
其实也可以认为元素定位没有变,只是元素所在容器的宽高变化,看起来像是元素的位置变了。

软键盘被唤起的时候,原本属于Webview的空间被软键盘占用了(是占用,不是覆盖或者遮盖)。屏幕一共就那么高,软键盘把Webview的空间占用了一部分,那么Webview自然就被挤压,高度也就变了。

解决办法

var footer= document.querySelector('.footer');
// 可见区域高度减去元素的高度
footer.style.top = document.documentElement.clientHeight - 40 + 'px';

完成

posted on 2019-10-28 16:13  万能的李大少  阅读(1217)  评论(0编辑  收藏  举报