TIL: Dynamic Viewport Units in CSS

Anyone that has done web development and had to show a hero banner fullheight on mobile knows the short comings of 100vh; mobile browsers and their pesky browser chrome (e.g. URL bar).

Seems the CSS folks fixed that problem in recent years with improved viewport units! The key one here is the dvh unit, which will seamlessly handle browser chrome popping up and cutting off your text.

Browser support is decent enough that unless you’re specifically targeting older browsers, you should be able to safely use it without too many issues!