Как сделать блок на всю высоту экрана

Короткий ответ

Единица vh — процент высоты окна, поэтому 100vh — это весь экран:

.hero {
  min-height: 100vh;
  min-height: 100dvh;
}

Вторая строка с dvh перекрывает первую там, где её понимают. На телефоне 100vh бывает выше видимой области из-за адресной строки, а dvh учитывает её.

Пример в окне

Пример ниже — отдельное маленькое окно, поэтому vh в нём считается от высоты окна примера:

<style>
  body { margin: 0; }
  .hero { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(teal, navy); color: white; }
</style>
 
<section class="hero"><h1>Welcome</h1></section>

Какую единицу выбрать

svh — высота при показанных панелях браузера (самая маленькая), lvh — при скрытых (самая большая), dvh меняется на ходу. Для первого экрана сайта обычно хватает dvh или svh.

Частая ошибка

height: 100vh жёстко ограничивает блок: если текста больше, чем помещается на экране, он вылезет наружу и налезет на следующую секцию. min-height разрешает блоку расти, поэтому для секций используйте его.