Add -webkit-fill-available for 100vh classes to fix iOS bottom navbar #4515
Replies: 11 comments 10 replies
-
|
I agree. Currently, I have to make a custom class like .min-safe-h-screen {
/* equivalent to 100dvh in major browsers */
min-height: calc(
100vh - env(safe-area-inset-bottom, 0) - env(safe-area-inset-top, 0)
);
}
@supports (-webkit-touch-callout: none) {
.min-safe-h-screen {
/* for ios safari 15, safe-area-inset-bottom is 0, so a special fix apply here */
min-height: -webkit-fill-available;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
I'd recommend using this PostCSS plugin after Tailwind: https://github.com/postcss/postcss-100vh-fix The problem is though even the Personally I have just completely given up on using 100vh ever, and rely on |
Beta Was this translation helpful? Give feedback.
-
|
How about adding dvh, lvh and svh to Tailwind :) |
Beta Was this translation helpful? Give feedback.
-
|
@adamwathan Only issue with drilling the h-full is the content outside of the h-full overflows the body, is the ok/"proper"? <Html className="h-full">
<body className="h-full">
<div className="relative h-full">
<Image src={heroImage} alt="kitchen lighting" priority objectFit="cover" layout="fill" />
</div>
<div className="mt-6">
This text overflows body
</div>
</body>
</Html> |
Beta Was this translation helpful? Give feedback.
-
|
@alvis's solution worked in my project for setting a container's height correctly, but the primary child of the container was unable to expand with "h-full". My solution was to make the container a flex box and have the child "grow". Hope this helps anyone who encountered a similar issue. |
Beta Was this translation helpful? Give feedback.
-
|
Another tip: If you only need to support newer browsers, the new Currently, chrome supports
(Note: You do not need to mark any divs as @containers to use this |
Beta Was this translation helpful? Give feedback.
-
|
Thanks! This is the only way that works for me, I tried the |
Beta Was this translation helpful? Give feedback.
-
|
Thanks you, this solution worked for me. |
Beta Was this translation helpful? Give feedback.
-
|
Legend - this worked for me! |
Beta Was this translation helpful? Give feedback.
-
|
Would |
Beta Was this translation helpful? Give feedback.
-
|
Take a look into this https://web.dev/viewport-units/ |
Beta Was this translation helpful? Give feedback.
-
|
Unrelated Fix I had the same problem. I ended up using a JS solution by setting the height of the div to |
Beta Was this translation helpful? Give feedback.
-
|
I also encountered the same problem ...for a quick fix I created a outer div with absolute position and inset-0 and set the children to have h-full. Hope this helps anyone for a quick fix. |
Beta Was this translation helpful? Give feedback.
-
|
Not sure about Chrome/Android. But this works for me on iOS: |
Beta Was this translation helpful? Give feedback.
-
|
For the latest version is should be |
Beta Was this translation helpful? Give feedback.
-
|
you're awsome! |
Beta Was this translation helpful? Give feedback.
-
|
Use this (from https://stackoverflow.com/a/66501522/5108062): <!-- this will use the whole viewport even in mobile -->
<div class="absolute inset-0">
<div>
lorem ipsum
</div>
</div> |
Beta Was this translation helpful? Give feedback.
-
|
If you want to retain your app's content within the actual visible screen, you can use 100dvh and where ever you are setting that you also need to set that same element to relative. index.css all children will now fall within the devices viewport. |
Beta Was this translation helpful? Give feedback.
-
|
It worked for me, and so easy. Thx man 😄 |
Beta Was this translation helpful? Give feedback.
-
|
I ended up doing this on my project /**
* @see: https://benborgers.com/posts/tailwind-h-screen
*/
@supports (height: 100dvh) {
:root {
--viewport-height: 100dvh;
}
.h-screen {
height: 100dvh;
}
.max-h-screen {
max-height: 100dvh;
}
}
@supports (-webkit-touch-callout: none) and not (height: 100dvh) {
:root {
--viewport-height: -webkit-fill-available;
}
.h-screen {
height: -webkit-fill-available;
}
.max-h-screen {
max-height: -webkit-fill-available;
}
}
@supports (height: -webkit-fill-available) and not (height: 100dvh) {
:root {
--viewport-height: -webkit-fill-available;
}
.h-screen {
height: -webkit-fill-available;
}
.max-h-screen {
max-height: -webkit-fill-available;
}
} |
Beta Was this translation helpful? Give feedback.
-
|
it does not work in some webview |
Beta Was this translation helpful? Give feedback.
-
On iphone setting an element to height 100vh will actually make it larger than the viewable part of the screen, because the safari bottom navbar will cover it.
Adding (min / max) - height: -webkit-fill-available; for the classes min-h-screen, max-h-screen and h-screen would fix this, and still fall back to 100vh for those who dont support -webkit-fill-available.
Beta Was this translation helpful? Give feedback.
All reactions