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 */
}
相关推荐
艾小码1 分钟前
AI时代,编程简化:前端开发的范式革命
前端
讨厌吃蛋黄酥1 分钟前
🔥 揭秘React魔法:从JSX到表单组件的性能与交互之争!
前端·javascript·react.js
沫小北2 分钟前
HarmonyOS Lottie动画库总结
前端·harmonyos
Oriel3 分钟前
在 Strapi v4 中生成专业 API 文档
前端·后端
WildBlue4 分钟前
解锁 Babel - JSX 编译:前端魔法背后的秘密🥳
前端·react.js
南方kenny4 分钟前
React 魔法揭秘:useRef 与 forwardRef 的奇妙之旅
前端·javascript·react.js
LaoZhangAI6 分钟前
Playwright MCP完整指南:AI驱动的浏览器自动化测试革命2025
前端·后端
前端Hardy8 分钟前
Python 打造 Excel 到 JSON 转换工具:从开发到打包全攻略
前端·后端·python
guiyanakaung8 分钟前
CMP 如何优雅的实现跨软件的拖拽功能
前端·github
海上生明月丿12 分钟前
Vue 工程化
前端·javascript·vue.js