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{

flex: 1;

}

我们利用核心代码写一个小例子看看效果：

html:

header

content

footer

css:

body{

display:flex;

flex-direction:column;

min-height:100vh;

}

.header,.footer{

width: 100%;

height: 100px;

background-color: #ddd;

color: #fff;

}

.content{

width: 100%;

flex: 1;

background-color: #000;

color: #fff;

}

效果图：

如果我们王content中添加内容，直到溢出：

html:

内容超出容器高度

效果为：

这个时候我们需要的效果就实现了。

三：利用~同辈选择器进行页面的排版(适用于输入框和按钮是同辈元素)

#contents:focus ~ button { display: none }

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

h5页面元素聚焦手机无法弹出键盘
移动端h5做手机app的直播视频碰到的问题 h5页面元素聚焦手机无法弹出键盘问题是这样产生的: 公司最近要搞一个直播的h5活动页内嵌到app上,当然我就来负责这个了. 但是这个项目我是半道接手的,原 ...
Android中软键盘弹出时关于布局的问题
当在Android的layout设计里面如果输入框过多,则在输入弹出软键盘的时候,下面的输入框会有一部分被软件盘挡住,从而不能获取焦点输入. 解决办法: 方法一:在你的activity中的oncrea ...
软键盘弹出时popwindow_PopupWindow与软键盘冲突
一.说明笔记主要是记录一些本人在开发当中的学习和使用笔记.笔记内容包含一些本人觉得重要的知识点.本人易犯的错误等. 由于本人水平有限,其中出现的错误或者不合理的地方望各位读者多多包含,并指出其中不合 ...
Android 软键盘弹出时布局内指定内容上移实现及问题解决
Android 软键盘弹出时布局内指定内容上移实现及问题解决参考文章: (1)Android 软键盘弹出时布局内指定内容上移实现及问题解决 (2)https://www.cnblogs.com/as ...
Android 软键盘弹出时把布局顶上去，控件乱套解决方法
Android 软键盘弹出时把布局顶上去,控件乱套解决方法参考文章: (1)Android 软键盘弹出时把布局顶上去,控件乱套解决方法 (2)https://www.cnblogs.com/zhuj ...
android软键盘把布局顶上去,Android 软键盘弹出时把原来布局顶上去的解决方法
键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: android:name=".filing.MainActivit ...
Android 软键盘弹出时把原来布局顶上去的解决方法
Android 软键盘弹出时把原来布局顶上去的解决方法参考文章: (1)Android 软键盘弹出时把原来布局顶上去的解决方法 (2)https://www.cnblogs.com/Joanna-Y ...
android软键盘顶部定义布局,Android 软键盘弹出时把原来布局顶上去的解决方法
键盘弹出时,会将布局底部的导航条顶上去. 解决办法: 在mainfest.xml中,在和导航栏相关的activity中加: android:name=".filing.MainActivit ...
小程序中点击input控件键盘弹出时placeholder文字上移
最近做的一个小程序项目中,出现了点击input控件键盘弹出时placeholder文字上移,刚开始以为是软键盘弹出布局上移问题是传说中典型的fixed 软键盘顶起问题,因此采纳了网上搜到的" ...
android 输入法键盘弹出与否判断和输入法键盘弹出时将界面滚动到指定位置
本文章重点谈下如何实现,结合以下demo,来谈谈输入法键盘弹出与否判断和输入法键盘弹出时将界面滚动到指定位置 1.先看下demo的场景,这是个登录界面,因为界面元素比较多,导致在输入法弹出时,下面的登 ...

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

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

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

最新文章

热门文章

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

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

内容超出容器高度

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

最新文章

热门文章

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

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