Tailwind CSS height screen in mobile browser

Question

I have an app that is full-screen

<div class="h-screen flex flex-col">
    <div>
        Header
    </div>
    <div class="flex-1 overflow-y-auto">
        Main
    </div>
    <div>
        Footer
    </div>
</div>

This works normally.

In the phone browser, the bottom menu goes out of the page. However it works in full-screen mode.

I could not solve it. Can anyone guide me?

Answer 1

tldr: change h-screen to h-dvh

Update

@rozsazoltan pointed out that we don't need to use an arbitrary value (h-[100dvh]) anymore because in Tailwind v3.4.0 they added svh, lvh, and dvh values to the default height/min-height/max-height theme.

I was scrolling through YouTube and Kevin Powell happened to release a video about these units just a day after my original answer. He does a good job at explaining these dynamic units and some of the resons why you'd want to use one over the other. I'd suggest giving it a watch.

Original:

This is beacuse of the way mobile browsers handle the vh unit. You can read more about it in this Stack Overflow answer to a similar issue.

While the answer I shared suggests using Javascript to set the height, there is a relatively new css unit called dvh. It works like vh, but it takes into account the url bar that shows/hides on mobile browsers when you scroll. It's current support is promising.

Simply changing the h-screen to h-[100dvh] should solve your issue.

This is also a good answer to reference when if you want to learn more about dvh and the other dynamic units.