Tailwind h-screen doesn’t work properly on mobile devices

Question

The h-screen class which should set the height as the height of the screen doesn’t work on iOS. Is there a way to fix that ?

But what browser on iOS? What version of system, what device? Also it would be good idea to provide some fiddle to tests — chojnicki, Apr 19 '20 at 17:26
@chojnicki I noticed it on my iPad Pro and iPhone both on safari with the latest iOS/iPadOS. But it appears to affect all mobile devices, check my answer :) — Pol, Apr 20 '20 at 18:28

score 31 · Answer 1 · answered Mar 06 '21 at 01:29

31

Often i find useful to set a absolute wrapper outside the content with a .inset-0 class

<!-- this will use the whole viewport even in mobile -->
<div class="absolute inset-0">
    <div>
      lorem ipsum
    </div>
</div>

answered Mar 06 '21 at 01:29

NEOJPK

757
1
8
17

1

This fixed my issue with `h-screen` where content was extending below the navigation bar in Samsung Internet on Android. Now it only fills the space visible above the navbar :) – mrossman Aug 17 '21 at 18:13
This worked just fine. Chrome, iOS! – Lucas L. Nov 30 '21 at 14:26
You are a lifesaver bro goodjob. – code.cycling Dec 10 '21 at 13:11
You have no idea how happy I am! All the other solutions I've seen involved confusing javascript and media queries. Thanks! – xornoz Nov 07 '22 at 06:44
1

This solution has some very weird side effects because it requires the dev to make the position of the element absolute. So no, this is not a very good solution I don't think, and I would avoid using it unless you know every potential side-effect that might occur by using it (in addition to every potential side-effect that might occur as code gets added and the apps scales up) As terrible as it sounds, you're probably going to avoid trouble in the long run by avoiding the use of absolutely positioned elements and instead setting the height using javascript instead of css. – John Miller Mar 29 '23 at 16:49
Hi @JohnMiller Absolute elements could have a relative child and it will negate all the sideeffects that you name. – NEOJPK Mar 31 '23 at 21:48
@NEOJPK No, it won't. Also, I think you mean relative parent, not relative child. – John Miller Apr 02 '23 at 18:08
here @JohnMiller learn something https://play.tailwindcss.com/umHIAf59aA pd: if im saying relative child its because i know what im talking about you dont get to correct me. Bye – NEOJPK Apr 03 '23 at 22:04
Either this doesn't work, or I am doing something wrong. What I did was basically wrap my content with the div shown. – Burak Kaymakci Aug 12 '23 at 13:16

faheemkodi · Answer 2 · 2023-04-27T13:06:23.183

16

Faced the same problem, and found out that we could use dvh (dynamic viewport height).

h-[calc(100dvh)] instead of h-screen.

However, it's better to add a fallback, just in case.

edited Apr 27 '23 at 13:06

answered Apr 27 '23 at 12:59

faheemkodi

249
3
8

4

That is the answer! – Bohne May 22 '23 at 11:30
Exactly what I was thinking to do here. Agree with Bohne, that's that correct answer. The upvoted answer with that absolute weird wrapper container is just a hack. – Matheus Oliveira Damião Aug 25 '23 at 19:27

score 8 · Accepted Answer · answered Jun 18 '22 at 07:18

8

Run this JavaScript code on your app load

document.documentElement.style.setProperty("--vh", window.innerHeight * 0.01 + 'px');

and put this on your global styles to overwrite h-screen class

.h-screen {
    height: 100vh; /* Fallback for browsers that do not support Custom Properties */
    height: calc(var(--vh, 1vh) * 100);
}

answered Jun 18 '22 at 07:18

NishantTheProgrammer

108
1
4

This should work however the question is asking about tailwind. – Emobe Jan 09 '23 at 14:27

score 6 · Answer 4 · answered Apr 20 '20 at 13:10

The problem is that h-screen uses 100vh as the height. As it’s mentioned in this question, 100vh aims to not work on mobile devices.

But there is a way to tricks it, but it won’t be added to tailwind because it needs JS. To know more about this ‘trick’ check this article : The trick to viewport units on mobile

score 1 · Answer 5 · answered Jul 24 '23 at 19:29

1

Adding h-[100svh] and h-screen as a fallback has solved my issue on iphones

answered Jul 24 '23 at 19:29

Ahmet Ulutaş

187
7

score 0 · Answer 6 · answered Jul 23 '23 at 16:55

0

Adding this to my css has proved to be a good solution:

@supports (-webkit-touch-callout: none) {
  .h-screen {
    height: -webkit-fill-available;
  }
}

answered Jul 23 '23 at 16:55

Majolo

56
3

score 0 · Answer 7 · answered Aug 27 '23 at 21:08

The main 'div' will take up the full height of the screen, while the inner 'div' will take up the available space, taking into account the height of the browser's navigation bar.

<div class="h-[100vh]">
    <div class="h-[100svh]">
      Bessie the cow
    </div>
</div>

Tailwind h-screen doesn’t work properly on mobile devices

7 Answers7