Issue
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.
But it works in full screen mode.
And I could not solve it.
Can anyone guide me?
Solution
tldr: change h-screen
to h-[100dvh]
Update:
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.
Answered By - Rico
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.