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

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

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

css 复制代码
<style>
.box{
	padding-bottom: env(safe-area-inset-bottom);
}
</style>
css 复制代码
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 */
}
相关推荐
zhanshuo11 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang12 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
khalil14 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录21 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672221 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少26 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
abigale032 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle
Joker`s smile3 小时前
Chrome安装老版本、不同版本,自制便携版本用于前端调试
前端·chrome
weixin_416639973 小时前
爬虫工程师Chrome开发者工具简单介绍
前端·chrome·爬虫