h5页面在安卓手机被软键盘弹起引起的bug

问题

自己写了个fixed定位的popup弹出层,在安卓手机上点击输入框后,软键盘弹起,导致底部按钮被挤上去引起的相关bug

解决思路

fixed定位的元素高度需要确切px值,不能%或者vh
在页面初始化时获取到body高度,写个监听方法,页面高度变化时,给body高度重新设置为初始化获取到的值。

代码

componentDidMount(): void {this.setState({windowHeight: window.innerHeight})window.addEventListener('resize', this.handleResize.bind(this));}componentWillUnmount(): void {window.removeEventListener('resize', this.handleResize.bind(this));}handleResize = e => {this.setState({windowHeight: this.state.windowHeight})}

将windowHeight值赋值给fixed定位的元素,内部需要设置高度的元素可以利用calc加减一定的值

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/501132.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ceph文件系统

ceph文件系统:高度可扩展,分布式的存储文件系统,旨在提高性能,高可靠性和高可用的对 象存储,块存储,文件系统的存储。使用分布式的算法保证数据的高可用和一致性。 ceph的组件 1、MON:ceph m…

MySQL 入门大全:运算符

🧑 博主简介:CSDN博客专家,历代文学网(PC端可以访问:https://literature.sinhy.com/#/literature?__c1000,移动端可微信小程序搜索“历代文学”)总架构师,15年工作经验,…

Px4 V2.4.8飞控Mavlink命令控制说明

首先,可以使用两种方法连接飞控,使用虚拟机(LINUX)或使用地面站(QGC)连接。 在px4的代码文件位置打开命令终端,输入连接命令: ./Tools/mavlink_shell.py 在控制台使用help来获取所有…

【Vim Masterclass 笔记05】第 4 章:Vim 的帮助系统与同步练习

文章目录 Section 4:The Vim Help System(Vim 帮助系统)S04L14 Getting Help1 打开帮助系统2 退出帮助系统3 查看具体命令的帮助文档4 查看帮助文档中的主题5 帮助文档间的上翻、下翻6 关于 linewise7 查看光标所在术语名词的帮助文档8 关于退…

java Redisson 实现限流每秒/分钟/小时限制N个

1.引入maven包: <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis</artifactId></dependency><dependency><groupId>org.redisson</groupId><artifactId>red…

C# 标准数字格式字符串

总目录 前言 当前文章为 C# 中的格式设置(格式化字符串) 大全 中的一个小章节。 一、概述 1. 基本信息 标准数字格式字符串用于格式化通用数值类型。标准数字格式字符串采用 [format specifier][precision specifier] 的形式 format specifier 格式说明符&#xff0c;负责指…

网络分析工具-tcpdump

文章目录 前言一、tcpdump基础官网链接命令选项详解常规过滤规则tcpdump输出 一、tcpdump实践HTTP协议ICMP状态抓包 前言 当遇到网络疑难问题的时候&#xff0c;抓包是最基本的技能&#xff0c;通过抓包才能看到网络底层的问题 一、tcpdump基础 tcpdump是一个常用的网络分析工…

【微软,模型规模】模型参数规模泄露:理解大型语言模型的参数量级

模型参数规模泄露&#xff1a;理解大型语言模型的参数量级 关键词&#xff1a; #大型语言模型 Large Language Model #参数规模 Parameter Scale #GPT-4o #GPT-4o-mini #Claude 3.5 Sonnet 具体实例与推演 近日&#xff0c;微软在一篇医学相关论文中意外泄露了OpenAI及Claud…

springboot集成qq邮箱服务

springboot集成qq邮箱服务 1.获取QQ邮箱授权码 1.1 登录QQ邮箱 1.2 开启SMTP服务 找到下图中的SMTP服务区域&#xff0c;如果当前账号未开启的话自己手动开启。 1.3 获取授权码 进入上图中的【管理服务】后&#xff1a;在【安全设置中生成授权码】,也可以直接点击【继续生成…

Windows系统提示ffmpeg.dll丢失怎么解决?

一、了解ffmpeg.dll文件 ffmpeg.dll是FFmpeg项目的一个动态链接库文件&#xff0c;FFmpeg是一个开源的多媒体处理框架&#xff0c;能够解码、编码、转码、混流、过滤和播放几乎所有已知格式的音频和视频文件。当Windows系统提示ffmpeg.dll丢失时&#xff0c;通常意味着某个需要…

直观解读 JuiceFS 的数据和元数据设计(一)

大家读完觉得有意义和帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 1 JuiceFS 高层架构与组件2 搭建极简 JuiceFS 集群 2.1 搭建元数据集群2.2 搭建对象存储&#xff08;MinIO&#xff09; 2.2.1 启动 MinIO server2.2.2 创建 bucket2.3 下载 juicefs 客户端2.4 创…

分布式微服务项目___某污水处理项目

一.分布式微服务项目___污水处理项目 项目地址:https://gitee.com/yanyigege/collaborative-water-springboot.git ​ 1.项目背景 总公司在全国各地有处理污水的项目部,各项目部处理自己的污水,总部需要监控各地分项目部每天处理污水的原料用量,掌握各分部的污水处理情况 ​…

鸿蒙HarmonyOS开发:拨打电话、短信服务、网络搜索、蜂窝数据、SIM卡管理、observer订阅管理

文章目录 一、call模块&#xff08;拨打电话&#xff09;1、使用makeCall拨打电话2、获取当前通话状态3、判断是否存在通话4、检查当前设备是否具备语音通话能力 二、sms模块&#xff08;短信服务&#xff09;1、创建短信2、发送短信 三、radio模块&#xff08;网络搜索&#x…

TVS二极管选型【EMC】

TVS器件并联在电路中&#xff0c;当电路正常工作时&#xff0c;他处于截止状态&#xff08;高阻态&#xff09;&#xff0c;不影响线路正常工作&#xff0c;当线路处于异常过压并达到其击穿电压时&#xff0c;他迅速由高阻态变为低阻态&#xff0c;给瞬间电流提供一个低阻抗导通…

sqlalchemy-access库操作MS Access

因目前项目中数据处理的量稍大&#xff0c;为了方便和业务进行交互&#xff0c;对数据的加工和处理放到微软桌面数据库MS Access中。然后有些地方通过 Python 来操作 MS Access 数据库&#xff0c;用到 sqlalchemy-access库。本文对操作的要点做简单的描述。 之前写过一篇 Pyt…

UnityRenderStreaming使用记录(三)

测试UnityRenderStreaming在Ubuntu24.04.1LTS上的表现 先放上运行图操作系统 Ubuntu24.04.1LTSUnity测试工程环境相关修改遇到的问题 先放上运行图 操作系统 Ubuntu24.04.1LTS 系统下载地址 https://cn.ubuntu.com/download/desktop安装UnityHub https://blog.csdn.net/AWNUXC…

==和===的区别,被坑的一天

在 JavaScript 中&#xff0c; 和 都用于比较两个值&#xff0c;但它们有一个重要的区别&#xff1a; 1. (宽松相等运算符) 进行比较时&#xff0c;会 自动类型转换&#xff08;也叫做强制类型转换&#xff09;&#xff0c;即如果比较的两个值的类型不同&#xff0c;JavaScr…

Git的使用流程(详细教程)

目录 01.Git是什么&#xff1f; 1.1 Git简介 1.2 SVN与Git的最主要的区别 1.3 GIt主要特点 02.Git是干什么的&#xff1f; 2.1.Git概念汇总 2.2 工作区/暂存区/仓库 2.3 Git使用流程 03.Git的安装配置 3.1 Git的配置文件 3.2 配置-初始化用户 3.3 Git可视化…

使用Docker部署最新版JupyterHub

拉取镜像 docker pull jupyterhub/jupyterhub:latest启动镜像 docker run -d -p 8000:8000 --name jupyterhub jupyterhub/jupyterhub:latest jupyterhub进入容器 docker exec -it jupyterhub bash生成jupyterhub的配置文件 jupyterhub --generate-config# 有需要可以安装中…

liunx下载gitlab

1.地址&#xff1a; https://mirrors.tuna.tsinghua.edu.cn/gitlab-ce/yum/el7/ 安装 postfix 并启动 yum install postfix systemctl start postfix systemctl enable postfix ssh服务启动 systemctl enable sshd systemctl start sshd开放 ssh 以及 http 服务&#xff0c…