如果在 iOS Safari 15 上查看，如何将 position 元素绝对底部？

Question

I have a screen height of 100vh with an element that is positioned in the bottom corner of the viewport.

If the user views on the latest iOS Safari, the search bar by default covers up that element.

Is there a way to adjust the position based on this particular browser?

Answer 1

You can use env(safe-area-inset-bottom) , which represents the search bar on iOS. This is by default set to 0.

Read more: https://developer.mozilla.org/en-US/docs/Web/CSS/env

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

Answer 2

You want the browser to dynamically adapt to the rendered space. To do so, you should use the dvh unit instead of the vh unit.

This unit get updated whenever the browser rendering space get updated (you have an equivalent for all basic viewport units: dvw , dvmin , dvmax ).