CODEWITHSUNDEEP
htmlcssiosiphonecss-position
stevensunsunsun
stevensunsunsun

Reputation: 53

How to position elements absolute bottom if viewing on iOS Safari 15?

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?

Upvotes: 3

Views: 4983

Answers (2)

Rémi Bernard
Rémi Bernard

Reputation: 119

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).

Upvotes: 3

Sigurd Mazanti
Sigurd Mazanti

Reputation: 2395

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);
}

Upvotes: 1

Related Questions