Turning a hero ratio into pixels
The reason to argue over 80vh versus 100vh is almost always the same one: whether the next section should peek into the first screen. Enter the viewport height and a ratio and you get the hero height in pixels, how many pixels of the following section remain visible, and, if you went past 100%, how far a visitor must scroll just to see the hero itself. Add the height of the content block inside the hero and the leftover vertical space, plus the per side figure when it is split evenly, come with it.
The calculation is hero = viewport height times the ratio divided by 100, and the formula is printed with the results. Next section exposure is viewport minus hero clamped at zero, and the overflow is hero minus viewport. Whether the hero matches the viewport is compared after rounding both to one decimal, so the displayed numbers and the note never disagree. The vh based CSS is generated against syntax current in October 2026.
This page recommends no ratio. There is no recognized standard for how tall a hero should be; it depends on the product and how much the first screen has to carry. Mobile toolbars that collapse and shift the meaning of vh, cropping caused by image aspect ratios, and scroll prompt animations are all out of scope.
Frequently Asked Questions
No recognized standard answers that, so this page offers no recommendation. Change the ratio, watch the next section exposure, and decide what the first screen has to carry.
Yes. A collapsing or expanding address bar changes the viewport height, so 100vh can end up taller than the visible screen. This page calculates from the fixed height you entered.
The content block exceeds the hero height, so no space is left around it. Either raise the ratio or shorten the block; the page only reports how many pixels over it runs.