vant 软键盘_H5页面 绝对定位元素被 软键盘弹出时顶起

H5页面 绝对定位元素被 软键盘弹出时顶起

在h5页面开发的过程中，我们可能会遇到下面这个问题，当页面中有输入框的时候，系统自带的软盘会把按钮挤出原来的位置。那么我们该怎么解决呢？下面列出一下的方法：

一：设置html和body高度，之后将按钮相对于body定位 (这里的body需要设置高度为100%)：

html,body{

position:relative;

height:100%;

min-height:100%;

}

button{

position:absolute;

bottom:0;

}

二：利用 css sticky footer 进行页面的排版

css sticky footer功能介绍：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。(具体介绍请点击传送门)

flex布局：传送门

核心样式代码：

整个页面的大容器(如body):

body{

display:flex;

flex-direction:column;

min-height:100vh;

}

需要固定的元素，比如视窗底部，如果内容足够长时，页脚块会被内容向下推送。

.footer{

height: 100px;

}

内容的容器：

.content{