Как сделать блок на всю высоту экрана без проблем с 100vh
Для полноэкранных секций часто пишут:
.hero {
min-height: 100vh;
}
На компьютере всё выглядит нормально.
Но на мобильных браузерах 100vh может вести себя неожиданно из-за адресной строки и нижней панели браузера.
В результате блок иногда оказывается выше видимой области, а часть контента уезжает вниз.
Для современных браузеров лучше использовать dvh:
.hero {
min-height: 100dvh;
}
dvh означает dynamic viewport height.
То есть браузер пересчитывает высоту блока вместе с изменением реально доступной области экрана.
Например:

Главный экран
Контент всегда помещается в видимую область.

.hero {
min-height: 100dvh;

display: grid;
place-items: center;
}
Теперь при появлении или скрытии панелей мобильного браузера высота секции будет корректироваться автоматически.
Есть ещё два похожих значения:
100svh
100lvh
100dvh
svh — минимальная высота viewport, когда панели браузера занимают бол