Как растянуть блок на весь экран (на всю высоту окна)?

Самый простой способ растянуть блок на всю высоту окна — единица vh (viewport height), где 100vh = вся высота видимой области браузера:

.hero {
  min-height: 100vh; /* минимум во весь экран */
}

Почему height: 100% не сработал: проценты высоты считаются от высоты родителя, а у родителя (вплоть до body и html) высота обычно не задана — она равна содержимому. Получается цепочка «100% от неопределённого = ничего». Чтобы проценты заработали, высоту надо протянуть сверху:

html, body { height: 100%; margin: 0; }
.hero { height: 100%; }

Но с vh эта возня не нужна — он меряется прямо от окна.

Советы:

• берите min-height: 100vh, а не height: 100vh: если контента окажется больше экрана, блок вырастет, а не обрежет содержимое;
• на всю ширину аналогично есть 100vw, но чаще достаточно width: 100% (vw иногда даёт горизонтальный скролл из-за полосы прокрутки);
• на мобильных классический 100vh может «прыгать» из-за адресной строки — в современных браузерах для этого есть 100dvh (dynamic viewport height), он учитывает сворачивание панелей.

Часто этот блок ещё центрируют по содержимому: display: flex; align-items: center; justify-content: center; вместе с min-height: 100vh.