使用环境变量safe-area-inset-bottom在底部填充网页，如下所示：

body {
    padding-bottom: env(safe-area-inset-bottom);
}

Jen Simmons的这节课讲述了如何处理Safari的新地址栏：https://developer.apple.com/videos/play/wwdc2021/10029/（从16：44分钟开始观看）

浮动的标签栏被认为是超出了安全区的下边缘。你可以在CSS中使用env(safe-area-inset-bottom)从视口的底部得到安全区的插入。
有关支持WebKit中的安全区域的详细信息：https://webkit.org/blog/7929/designing-websites-for-iphone-x

这种行为正在发生很大的变化。我建议在你的页面上添加一个像这样的DIV：

<div style="background: red; color: white; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)">Hello!</div>

这会在一个红色的框中给予单词Hello!，并应用了四个安全边距。在页面上的任何地方都可以看到这些边距--你不需要将其作为页脚或页眉。这是一个非常好的帮助，可以可视化正在发生的事情。
截至Safari 15当前测试版，有：

• 不再是浮动地址栏。
• 不再为env(safe-area-inset-bottom)设置任何值，以避免干扰底部地址栏。
• 设置env(safe-area-inset-bottom)***的目的是避免主屏幕指示条。
• 将页面高度设置为100 vh将防止地址栏出现***，除非有人点击屏幕底部的网站名称。
• 然而，在100 vh的情况下，物品可能会隐藏在底部的栏下。我真的希望他们能修正这个行为，设置安全区。

因此，要使红框实际显示为有填充，您必须：

• 在Safari设置中切换到“单标签模式”（顶部的地址栏）。
• 上下滚动页面以显示和隐藏地址栏。
• 请注意，只有当主屏幕指示符可见时（屏幕底部的白色条），框才会有底部填充。

你可以使用ObserveResize和Css来解决在屏幕底部附加绝对dom元素的问题。

下面是示例：JavaScript es6 + css solution

这个问题的另一个解决方案（适用于100vh）是：

min-height: 100vh; 
min-height: -webkit-fill-available;

Webkit（和其他软件）发布了新的单位，以便更好地控制视口高度行为。https://webkit.org/blog/12445/new-webkit-features-in-safari-15-4/
新的视口单位就是该解决方案：

• 100svh是指最小可能视口高度的100%。
• 100lvh是指最大可能视口高度的100%。
• 100dvh指的是动态视口高度的100%-这意味着该值将随着用户滚动而改变。

到目前为止，你还不能真正检测到地址栏的大小，因为env(...) inset变量在最终版本中被删除了。但是！地址栏确实会影响页面上的定位。
我不太清楚它是如何决定要移动哪些元素的，但是页面元素可以对它做出React，例如，在移动终端上查看twitter.com时，可以查看Twitter的导航栏。
如果你想要类似的行为
1.使用fixed定位制作div
1.将其从bottom设置为0
注意将固定div的高度设置为100vh，因为我认为这会将其挤出地址栏的React区域。
请，任何人，张贴评论和更新这个问题，因为它的变化频繁。