Как сделать чтобы блок был на всю высоту вьюпорта при любом разрешении?

Чтобы сделать блок на всю высоту вьюпорта при любом разрешении экрана, можно использовать CSS свойство height в сочетании с единицей измерения vh.

vh (viewport height) - это относительная единица измерения, которая представляет собой процент от общей высоты вьюпорта (видимой части экрана).

1. Способ с использованием абсолютного позиционирования и height: 100vh:

html, body {
  height: 100%; /* Установите высоту для body и html на 100%, чтобы применимые к ним блоки работали как ожидается */
  margin: 0; /* Установите отступы для body на 0, чтобы убрать отступы по умолчанию */
}

.block {
  position: absolute; /* Используйте абсолютное позиционирование */
  top: 0; /* Разместите блок вверху страницы */
  left: 0; /* Разместите блок влево */
  width: 100%; /* Установите ширину блока на 100% */
  height: 100vh; /* Установите высоту блока на 100% от высоты вьюпорта */
}

2. Способ с использованием флексбоксов и min-height: 100vh:

body {
  display: flex; /* Используйте флексбоксы для контроля положения и высоты элементов */
  min-height: 100vh; /* Установите минимальную высоту body на 100% от высоты вьюпорта */
  margin: 0; /* Установите отступы для body на 0, чтобы убрать отступы по умолчанию */
}

.block {
  flex: 1; /* Растяните блок на всю доступную высоту */
}

Оба способа позволят вам создать блок, который будет занимать всю высоту вьюпорта, независимо от разрешения экрана. Вы можете использовать любой из приведенных выше примеров в CSS своего проекта, в зависимости от вашей предпочитаемой методологии и потребностей проекта.