如何在移动设备上相对于浏览器按钮面板定位元素底部？

Question

网站中的浮动按钮隐藏在浏览器按钮面板后面。有没有办法根据移动设备上的浏览器按钮面板定位元素？

我尝试在

这里

添加env(safe-area-inset-bottom)作为建议者。我还尝试按照同一线程中的建议将

position: static

添加到

body

。我还尝试了 google 和 StackOverflow 的各种其他解决方案，但似乎不起作用。

Answer 1

最终通过使用

dvh

-> 动态视口高度解决。

旧CSS

.floating {
  position: fixed;
  right: 30px;
  bottom: 30px;
}

已修复以下内容

.floating {
  position: fixed;
  right: 30px;
  height: 60px;
  bottom: calc(100dvh - 90px);
}