You Shouldn’t Rely on CSS 100vh and Here’s Why!

Did you know that on mobile devices, 100vh is NOT actually 100vh?

Photo by Andrea Piacquadio

You have a text and a button, you want the text to stick to the top and the button, to the bottom! Seems easy. We can use CSS flex!

// HTML
<div className="layout">
  <p>Lorem ipsum dolor sit amet...</p>
  <button>Sign Up</button>
</div>

// CSS
.layout {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100vh;
}

Checking the results on your machine…

Cool! Git add, git commit, git push, oh yeah!

Photo by Andrea Piacquadio

Is There Any Problem?

Of course, there is! To see the problem, you need to view your app on a real phone or a simulator. I’m using iPhone 13 (iOS 15.2) for testing throughout this article and here’s the result: