浏览器底部导航栏遮盖问题

news2025/1/20 10:51:21

欧吼,算是遇到两次了这种问题。每次解决完都觉得很无语🤮

先看问题如图(怕公司说我泄露他们啥信息,于是打了非常离谱且难看的马赛克😊):

本来要在底部导航栏上方展示底部信息。

电脑上看倒是好好的,手机浏览器打开一看啊哈⬇️,喜提一个大bug ,底部导航把信息遮挡住了。

如何解决呢?

其实我也不懂,但套路好像大概就是那样 。

给被遮盖信息的盒子设置固定定位:position: 'fixed',

bottom: 0,

paddingBottom: 'calc(env(safe-area-inset-bottom) + 底部导航栏高度)',

safe-area-inset-bottom就是移动端的安全区域。

安全区域就是一个可视窗口区域,处于安全区域的内容不受圆角、刘海、小黑条的影响。

如图红色长方形内区域即是安全区域。

主要就是下面三行代码⬇️

原来是这么写的⬇️

 

有大佬懂得评论区解惑一下呗,thank you😊

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

怎样设计产品帮助中心?以下几点不可忽视

在日常产品的使用过程中,我们经常会遇到一些关于产品的使用相关问题,此时我们会去翻阅产品的说明书,而对于线上的产品来说,一般都会搭配对应的帮助文档,帮助文档可以提供关于用户在使用过程中遇到的各种问题的解答&…

【再学Tensorflow2】TensorFlow2的建模流程:Titanic生存预测

TensorFlow2的建模流程1. 使用Tensorflow实现神经网络模型的一般流程2. Titanic生存预测问题2.1 数据准备2.2 定义模型2.3 训练模型2.4 模型评估2.5 使用模型2.6 保存模型参考资料在机器学习和深度学习领域,通常使用TensorFlow来实现机器学习模型,尤其常…

03Python算数运算符及变量基本使用

算数运算符 算数运算符 是完成基本的算术运算使用的符号,用来处理四则运算 运算符描述实例加10 20 30-减10 - 20 -10*乘10 * 20 200/除10 / 20 0.5//取整除返回除法的整数部分(商) 9 // 2 输出结果 4%取余数返回除法的余数 9 % 2 1*…

干货 | 云原生时代的灰度发布有几种“姿势”?

随着企业数字化转型进程不断发展,云原生时代的来临,企业应用越来越多,不得不面对应用程序升级的巨大挑战。传统的停机发布方式,新旧版本应用切换少则停机30分钟,多则停机10小时以上,愈发无法满足业务端的需…

java入门及环境配置

java三大版本 JavaSE: 标准版(桌面程序,控制台开发........) JavaEE: 嵌入式开发(手机,小家电.....) JavaEE: E企业级开发(web端,服务器开发...) JDK、JRE、JVM: Java安装开发环境&a…

信息化时代企业数据防泄露工作该怎么做

场景描述 信息化时代发展迅速,数据防泄露一词也频繁的出现在我们身边。无论企业或政府单位,无纸化办公场景越来越多,数据泄露的时间也层出不穷。例如:世界最大职业中介网站Monster遭到黑客大规模攻击,黑客窃取在网站注…

计算机毕设Python+Vue药品销售平台(程序+LW+部署)

项目运行 环境配置: Jdk1.8 Tomcat7.0 Mysql HBuilderX(Webstorm也行) Eclispe(IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持)。 项目技术: SSM mybatis Maven Vue 等等组成,B/S模式 M…

模板二(基础算法)

目录 快速排序 归并排序 二分 整数二分 浮点数二分 前缀和 一维前缀和 二维前缀和 差分 一维差分 二维差分 双指针 位运算 离散化 区间合并 快速排序 方法一:定义两个新数组,a[ ],b[ ],每次将大于x的放到a中,小于x的放到b中&…

【矩阵论】6.范数理论——范数估计——许尔估计谱估计

6.3 许尔估计 任意方阵 A(aij)nnA(a_{ij})_{n\times n}A(aij​)nn​ ,全体根 λ(A){λ1,⋯,λn}\lambda(A)\{\lambda_1,\cdots,\lambda_n\}λ(A){λ1​,⋯,λn​} ,满足 ∣λ1∣2⋯∣λn∣2≤∑∣aij∣2\vert \lambda_1\vert^2\cdots\vert \lambda_n\ve…

数据存储格式

文章目录数据存储格式1 行列存储比较2 ORC文件格式2.1 文件级2.1.1 Post scripts2.1.2 File Footer2.1.3 File MetaData2.2 Stripe级2.2.1 Stripe Footer2.2.2 Row Data2.2.3 Index Data3 Parquet文件格式3.1 Header3.2 Data3.2.1 Row Group3.2.2 Column Chunk3.2.3 Page3.3 Fo…

正则表达式判断数字

判断 正负整数,正负小数 表达式: ^[-]?([0]{1,1}|[1-9]{1,1}[0-9]*?)[.]?[\\d]{1,}$ import java.util.Scanner; import java.util.regex.Pattern; public static void main(String[] args) { Pattern pattern Pattern.compile("^[-]?([0]{1,1}|[1-9]{1,1}…

3dtiles数据解析

1.解析json文件 2.解析b3dm模型 (1)b3dm模型文件时二进制文件,其中包含glTF文件: 当使用tiny_gltf库解析glTF时,需要减去(28byte featuretable的byte batchTable的byte ): bool TinyGLTF::ExtractGltfFromMemory(Model *model,std::string…

JVM - 内存区域划分 类加载机制 垃圾回收机制

目录 1. 内存区域划分 2. 类加载 2.1 双亲委派模型 3. 垃圾回收机制 (GC) 3.1 如何判断一个对象是否为 "垃圾" 3.1 可达性分析 3.2 垃圾回收算法 1. 内存区域划分 JVM 作本质上是一个 Java 进程, 它启动的时候, 就会从操作系统申请一大块内存, 并且把这一大块…

CSS学习(七):盒子模型,圆角边框,盒子阴影和文字阴影

原文链接:CSS学习(七):盒子模型,圆角边框,盒子阴影和文字阴影 1. 盒子模型 页面布局要学习三大核心:盒子模型,浮动和定位。学习好盒子模型能非常好的帮助我们页面布局。 1.1 看透…

肽基脯氨酰异构酶底物:1926163-51-0,WFY-pSer-PR-AMC

WFYpSPR-AMC, Pin1底物类似显色底物H- trp - phi - tir - ser (PO₃H₂)-Pro-Arg-pNA。 磷酸肽在生命过程中发挥重要作用,磷酸化的位置在多肽上的Tyr、Ser,Thr,。目前磷酸肽合成一般都采用磷酸化氨基酸,目前使用的都是单苄基磷酸化…

Kafka Producer - 分区机制实战

Kafka Producer - 分区机制实战 上一篇介绍了kafka Producer 生产者发送数据的程序代码,以及对生产者分区机制的相关介绍,今天继续深入的了解下分区机制的原理、测试验证、自定义分区。 在学习之前先在本地机器搭建一个单机版的双节点集群环境&#xf…

80.【Spring5】

Spring《解耦》(一)、Spring 简介1.历史:2.Spring 目的3.Spring 引入4.优点5.Spring 七大模块组成:6.扩展(约定大于配置)(二)、IOC理论推导(Inversion of Contro)1.以前的三层分级2.现在对三层架构的更新3.什么是IOC(三)、HelloSpring1.怎么使用Spring?…

技术分享 | 缓存穿透 - Redis Module 之布隆过滤器

作者:贲绍华 爱可生研发中心工程师,负责项目的需求与维护工作。其他身份:柯基铲屎官。 本文来源:原创投稿 *爱可生开源社区出品,原创内容未经授权不得随意使用,转载请联系小编并注明来源。 一、场景案例 假…

设计模式-抽象工厂模式

1、什么是抽象工厂模式 抽象工厂(AbstractFactory)模式的定义:是一种为访问类提供一个创建一组相关或相互依赖对象的接口,且访问类无须指定所要产品的具体类就能得到同族的不同等级的产品的模式结构。抽象工厂模式是工厂方法模式的…

Tiny ImageNet 数据集分享

ImageNet官网上的数据集,动辄就100G,真的是太大了。 有需要Tiny Image Net 数据集的小伙伴可以点击这个下载链接: http://cs231n.stanford.edu/tiny-imagenet-200.zip数据集简介: Tiny ImageNet Challenge 来源于斯坦福 CS231N …