51CTO首页
AI.x社区
博客
学堂
精品班
软考社区
免费课
企业培训
鸿蒙开发者社区
WOT技术大会
IT证书
公众号矩阵
移动端
视频课免费课排行榜短视频直播课软考学堂
全部课程软考华为认证厂商认证IT技术PMP项目管理免费题库
在线学习
文章资源问答课堂专栏直播
51CTO
鸿蒙开发者社区
51CTO技术栈
51CTO官微
51CTO学堂
51CTO博客
CTO训练营
鸿蒙开发者社区订阅号
51CTO软考
51CTO学堂APP
51CTO学堂企业版APP
鸿蒙开发者社区视频号
51CTO软考题库
活动 短视频 专栏 极客Show 鸿蒙技术特刊

HarmonyOS Web组件安全避让导航栏

HarmonyOS
put_get
2024-12-25 14:15:12
571浏览
赞
收藏 0
回答 1
回答 1
按赞同
/
按时间
Heiang
Heiang

使用env(safe-area-inset-bottom)，如下参考：

<!-- index.html -->
  <!DOCTYPE html>
  <html>
  <head>
  <meta name="viewport" content="width=device-width,viewport-fit=cover">
  </head>
  <body>
  <div style="position: absolute; bottom: 0; margin-bottom: env(safe-area-inset-bottom)"></div>
  </body>
  </html>

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
分享
微博
QQ
微信
回复
2024-12-25 17:22:42


如何写精华回答，获更多曝光？
发布
相关问题
HarmonyOS Web组件的安全区域的值不对，无法实现底部导航栏的避让
819浏览 • 1回复 待解决
HarmonyOS 如何全局避让手机底部的导航栏？
1716浏览 • 0回复 待解决
设置沉浸式后，页面布局会不避让状态栏与导航栏，其重叠，如何处理？
3175浏览 • 1回复 待解决
HarmonyOS web组件中拉起键盘，键盘避让不完全
925浏览 • 1回复 待解决
#鸿蒙学习大百科#如何设置监听，动态获取避让区（状态栏、底部导航栏）的高度？
1196浏览 • 1回复 待解决
导航栏设置问题：设置状态栏，底部导航栏时感觉底部导航栏设置隐藏无效
1357浏览 • 1回复 待解决
HarmonyOS 组件导航 (Navigation)可以隐藏标题栏、菜单栏、工具栏么
970浏览 • 1回复 待解决
当前组件，默认都会安全区避让，对于手机顶部，会有手机时间手机电量等字，如何设置不避让顶部安全区
1349浏览 • 1回复 待解决
Tabs组件自定义导航栏UI问题
1469浏览 • 1回复 待解决
uiextension为什么不会避让顶部状态栏
1588浏览 • 1回复 待解决
HarmonyOS 怎么禁用原生导航栏
998浏览 • 1回复 待解决
HarmonyOS 怎么去掉底部导航栏
1053浏览 • 1回复 待解决
Tab导航栏tabbar子组件突出上沿显示
3104浏览 • 1回复 待解决
获取状态栏与导航栏高度
1561浏览 • 1回复 待解决
Navigation如何隐藏导航栏
3151浏览 • 1回复 待解决
关于sidebar侧边栏遮挡导航栏的问题
1226浏览 • 1回复 待解决
如何获取状态栏与导航栏高度？
1234浏览 • 0回复 待解决
如何获取状态栏和导航栏高度
3919浏览 • 1回复 待解决
底部导航栏问题，底部导航栏可否隐藏，在什么场景会变化颜色
1517浏览 • 1回复 待解决
HarmonyOS上对导航栏怎么适配？
945浏览 • 1回复 待解决
HarmonyOS 导航栏主题色如何配置
932浏览 • 1回复 待解决
HarmonyOS 导航栏跳转后重置栈
923浏览 • 1回复 待解决
HarmonyOS 如何获取底部导航栏高度？
975浏览 • 1回复 待解决
HarmonyOS 如何获取顶部导航栏高度
1002浏览 • 1回复 待解决
HarmonyOS 导航栏高度和状态栏高度貌似不对
1823浏览 • 1回复 待解决
提问
该提问已有2人参与 ，帮助了14人
相关讨论帖
OpenHarmony自定义组件之--导航栏组件（NavBarOhos） 2回复
鸿蒙开源组件——轻量级的自定义导航栏组件 0回复
#夏日挑战赛# OpenHarmony ArkUI-JS小组件-导航栏 2回复
openharmony：systemui 状态栏导航栏颜色变化逻辑 0回复
鸿蒙开发(五)：底部导航栏的实现 0回复