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;
}
} |
|
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 |
|
How about adding dvh, lvh and svh to Tailwind :) |
|
@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> |
|
@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. |
|
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 |
|
Thanks! This is the only way that works for me, I tried the |
|
Thanks you, this solution worked for me. |
|
Legend - this worked for me! |
|
Would |
|
Take a look into this https://web.dev/viewport-units/ |
|
Unrelated Fix I had the same problem. I ended up using a JS solution by setting the height of the div to |
|
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. |
|
Not sure about Chrome/Android. But this works for me on iOS: |
|
For the latest version is should be |
|
you're awsome! |
|
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> |
|
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. |
|
It worked for me, and so easy. Thx man 😄 |
|
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;
}
} |
|
it does not work in some webview |
Uh oh!
There was an error while loading. Please reload this page.
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.
All reactions