CSS设置移动端页面底部安全距离

article/2025/6/8 8:11:25

如图:在开发微信小程序时遇到的按钮被iOS设备底部黑线遮挡的问题,以及如何利用CSS中的env(safe-area-inset-bottom)属性来创建安全区域,避免内容被遮挡。通过将该属性应用到padding或height上,成功解决了问题

env(safe-area-inset-bottom)是一个CSS属性值,用于设置底部安全距离。它表示使用环境变量来获取底部安全距离的值。当使用环境变量时,需要使用env()函数来引用具体的环境变量。例如:

<style>
.box{padding-bottom: env(safe-area-inset-bottom);
}
</style>

 

body {padding-top: constant(safe-area-inset-top);  /* iOS */padding-top: env(safe-area-inset-top);        /* Android */padding-bottom: constant(safe-area-inset-bottom); /* iOS */padding-bottom: env(safe-area-inset-bottom);       /* Android */
}


http://www.hkcw.cn/article/TZMDulZiyw.shtml

相关文章

Go语言学习-->第一个go程序--hello world!

Go语言学习–&#xff1e;第一个go程序–hello world! 1 写代码前的准备 1 创建编写代码的文件夹 2 使用vscode打开3 项目初始化 **go mod init*&#xff08;初始化一个go mod&#xff09;Go Module 是 Go 1.11 版本引入的官方依赖管理系统&#xff0c;用于替代传统的 GOPATH…

02 C语言程序设计之导言

文章目录 1、入门1-1、引例1-2、练习题1-2-1、Job11-2-2、Job2 2、变量与算术表达式2-1、引例2-2、练习题2-2-1、Job12-2-2、Job2 3、for语句3-1、引例3-2、练习题 4、符号常量5、字符输入/输出5-1、文件复制5-1-1、引例5-1-2、练习题5-1-2-1、Job15-1-2-2、Job2 5-2、字符计数…

血管的三维重建

血管的三维重建 摘 要 断面可用于了解生物组织、器官等的形态&#xff0c;在医学上有重要的作用。用切片机连续不断地将样本切成数十、成百的平行切片&#xff0c;可依次逐片观察。根据平行切片数字图象&#xff0c;运用计算机可重建组织、器官等准确的三维形态。 本文提出了一…

如何在 DataGrip 中 连接 Databend

本文通过详细的步骤演示了如何新建 自定义 Driver 以在 DataGrip 中支持连接 Databend&#xff0c;包括设置 Class、DriverFiles 和URLtemplates。最后&#xff0c;通过新建 Driver 和 DataSource&#xff0c;并在 Databend Cloud 上进行连接测试&#xff0c;确保能成功访问数据…

黑马程序员TypeScript课程笔记2(11-20)

11.数组类型 数组类型可以写为"let numbers:number[][1,2,3] ,也可以写为let numbers:Array[1,2,3] 12.联合类型 联合类型的写法 let arr:(number|string)[][1,a,2,g] 13.类型别名(可以为任意类型起别名&#xff0c;起到一个简化类型名的作用) 14.函数类型&#xff08;1…

Tailwind CSS 实战:基于 Kooboo 构建 AI 对话框页面(六):图片上传功能

在 《Tailwind CSS 实战&#xff1a;基于 Kooboo 构建 AI 对话框页面&#xff08;五&#xff09;》 中&#xff0c;完成了语音交互功能的优化。本文作为该系列教程的第六篇&#xff0c;将聚焦于图片上传功能的开发。通过集成图片上传与预览能力&#xff0c;我们将进一步完善 AI…

常用工具推荐---QQ截图功能、iLovePDF与Pandoc

常用工具推荐 QQ中的超实用功能截图功能录屏功能屏幕识图以及屏幕翻译 iLovePDFPandocPandoc 安装Pandoc使用 QQ中的超实用功能 比起本地截图&#xff0c;个人使用最多的是QQ截图&#xff0c;CSDN里的插图都是使用QQ截的&#xff0c;我不允许有人不知道这么好用的功能&#x…

核心机制:流量控制

搭配滑动窗口使用的 窗口大小 窗口越大,传输速度就越快,但是也不能无限大,太大了,对于可靠性会有影响 比如发生方以非常快的速度,发送,接收方的处理速度跟不上,也就会导致有效数据被接受方丢弃(又得重传) 流量控制,就是根据接收方的处理能力(如何衡量?),干预到发送方的发送…

如何避免工具过多导致的效率下降

避免工具过多导致效率下降需通过精简工具数量、选择高效工具、明确工具使用规范、加强工具集成与协作等措施&#xff0c;其中&#xff0c;精简工具数量是最关键的一步&#xff0c;通过减少冗余工具的使用&#xff0c;可有效避免工具过多造成的信息分散和沟通障碍&#xff0c;从…

C++ stl容器之string(字符串类)

目录 &#xff08;0&#xff09;string和char *的区别 &#xff08;1&#xff09;string类对象的构造 &#xff08;2&#xff09;容量操作 &#xff08;3&#xff09;访问遍历 1.用下标访问和遍历 2.用迭代器访问和遍历 ①迭代器说明 ②迭代首尾注意事项 ③使用举例 …

Python基于局部线性嵌入法和多维缩放方法的S形流行数据降维对比项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在现代数据分析领域&#xff0c;面对高维数据的挑战日益增加&#xff0c;降维技术成为理解和处理复杂数据集的关键工…

ABP-Book Store Application中文讲解 - Part 5: Authorization

ABP-Book Store Application中文讲解 - Part 5: Authorization 1. 汇总 ABP-Book Store Application中文讲解-汇总-CSDN博客 2. 前一章 ABP-Book Store Application中文讲解 - Part 4: Integration Tests-CSDN博客 项目之间的引用关系。 ​ ABP有一套完整的权限控制系统&…

安全月报 | 傲盾DDoS攻击防御2025年5月简报

引言 在2025年5月&#xff0c;全球数字化进程高歌猛进&#xff0c;各行各业深度融入数字浪潮&#xff0c;人工智能、物联网、大数据等前沿技术蓬勃发展&#xff0c;进一步夯实了数字经济的基石。然而&#xff0c;在这看似繁荣的数字生态背后&#xff0c;网络安全威胁正以惊人的…

rabbitMQ初入门

1、MQ定义及作用 MQ即MessageQueue&#xff0c;消息队列。其中消息Message&#xff1a;在不同的应用中传递的数据&#xff1b;队列Queue&#xff1a;一种FIFO先进先出的数据结构。将消息以队列的形式存储起来&#xff0c;并且在不同的应用程序之间进行传递&#xff0c;这就成了…

重新审视自回归语言模型的知识蒸馏

Revisiting Knowledge Distillation for Autoregressive Language Models 发表&#xff1a;ACL 2024 机构&#xff1a;School of Computer Science Abstract 知识蒸馏&#xff08;Knowledge Distillation, KD&#xff09;是一种常见的方法&#xff0c;用于压缩教师模型&…

力扣 88.合并两个有序数组

文章目录 题目介绍题解 题目介绍 题解 法一&#xff1a;暴力法 class Solution {public void merge(int[] nums1, int m, int[] nums2, int n) {for(int i 0; i < n; i){nums1[mi] nums2[i];}Arrays.sort(nums1);} }法二&#xff1a;倒序双指针 时间复杂度为O(mn) 从右…

生成模型+两种机器学习范式

生成模型&#xff1a;从数据分布到样本创造 生成模型&#xff08;Generative Model&#xff09; 是机器学习中一类能够学习数据整体概率分布&#xff0c;并生成新样本的模型。其核心目标是建模输入数据 x 和标签 y 的联合概率分布 P(x,y)&#xff0c;即回答 “数据是如何产生的…

Python趣学篇:Turtle绘制炫酷彩色螺旋图案

名人说&#xff1a;路漫漫其修远兮&#xff0c;吾将上下而求索。—— 屈原《离骚》 创作者&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 专栏介绍&#xff1a;《Python星球日记》 目录 一、螺旋之美&#xff1a;当数学遇上艺…

学习threejs,交互式神经网络可视化

&#x1f468;‍⚕️ 主页&#xff1a; gis分享者 &#x1f468;‍⚕️ 感谢各位大佬 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍⚕️ 收录于专栏&#xff1a;threejs gis工程师 文章目录 一、&#x1f340;前言1.1 ☘️THREE.EffectComposer 后期…

50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | Dad Jokes(冷笑话卡片)

&#x1f4c5; 我们继续 50 个小项目挑战&#xff01;—— DadJokes 组件 仓库地址&#xff1a;https://github.com/SunACong/50-vue-projects 项目预览地址&#xff1a;https://50-vue-projects.vercel.app/ 豆包翻译确实可以&#xff0c;冷笑话应该属于各类语言比较难理解的…