Back to anti-patterns
header-plus-viewport-hero
Header Plus Viewport Hero
An external header is stacked above a hero that independently consumes a full viewport height, pushing the hero bottom below the visible screen.
Anti-patternsRecommended
Intent
Keep immersive first screens complete on short laptops and mobile browsers by assigning one shared height budget to header and hero.
Checks
- Wrap an integrated header and hero in one `100svh` first-screen grid, or subtract the measured external header height from the hero.
- Compare the computed header bottom, hero bottom, and viewport bottom at a short desktop height.
- Let content grow and scroll when it exceeds the remaining hero budget instead of clipping it with hidden overflow.
Warnings
- Changing a child hero from `100svh` to an arbitrary smaller viewport percentage only moves the failure to another header or viewport height.
Exceptions
- A deliberately multi-viewport opening may exceed the first screen when the requested composition keeps content reachable and makes that continuation obvious.