DEV Community

Discussion on: 100vh behavior on Chrome

baamenabar profile image
B. Agustín Amenábar Larraín

Cool article, I´ve bumped into this problem at least once a year. I´m never happy with the solution that work, but in the end I´m happy to have anything that works.

And I still don´t understand why min-height:100% on the

element does not work (given that html is indeed 100% height).

thanks for the article.

rgbink profile image
Anthony DeCrescenzo • Edited on

Came here for the solution, stayed to necropost. 😏

The reason 100% doesn't work is because % is a VERY relative measurement. 100% of what?

If your hero image is nested at all then 100% refers to the parent container's height.

VH & VW are absolute measures. X/100ths of the viewport height or width. Period.

Make sense?