Bramus Van Damme

The Large, Small, and Dynamic Viewports

https://www.bram.us/2021/07/08/the-large-small-and-dynamic-viewports/

Bramus shows how the situation might finally improve for viewport height CSS units, more than 6 years after I reported the unreliable 100vh value as a bug to webkit, and webkit replied it was "intended".

Be careful with the upcoming dynamic viewport units (dvh/dvb, dvmin and dvmax at least), as using it to size things in the block axis, as it may generate unpleasant changes in the UI.

• older link:
  Positioning Overlay Content with CSS Grid
• newer link:
  The Current State of Homepage UX – 8 Common Pitfalls

---

Related contents with similar topics

1. • Nicolas Hoizey
   • 19 July 2022
   • 100vh, CSS, viewport
   • 6 reactions
   • permalink

   💡 CSS idea of the day:

   :root {
     --full-height: 100vh;
   }
   @​supports(height: 100dvh) {
   
   :root {
   
   --full-height: 100dvh;
   
   }
   
   }

   Clever? Stupid? Old?

2. 

   Jason Grigsby

   A Bashful Button Worth 8 Million Dollars

   • Nicolas Hoizey
   • 17 June 2021
   • 100vh, CSS, viewport, responsive
   • 5 reactions

   6 years ago I reported a bug about 100vh being larger than the viewport height in Safari. It was "intentional" according to webkit/Safari team, and…

3. Viewport height is taller than the visible part of the document in some mobile browsers

   • Nicolas Hoizey
   • 18 February 2015
   • CSS, viewport, responsive, 100vh, bug, mobile
   • 251 reactions

   When trying to use a 100vh CSS value to build a new interface for a game that would use the full viewport, I discovered that this full height value…