выравнивание блока на всю высоту экрана

Пример данного урока вы можете просмотреть перейдя по ссылке Демо

Для реализации данного решения мы будем использовать единицы измерения vh и vw

vh - viewport height — высота области просмотра 

vw - iewport width — ширина области просмотра.

1vh равен одному проценту от высоты области просмотра, 1vw равняется одному проценту от ширины области просмотра.

Пример стиля CSS:

block { height: 100vh; /* высота блока равна высоте области просмотра */ }

Этот стиль нужно применить к нашему блоку он будет выглядеть так:

<block>
<p>Этот блок занимает 100% высоты области просмотра.</p>
</block>

Еще не менее полезные единицы измерения vmin и vmax

vmin - viewport minimal

vmax - viewport maximal.

1vmin сравнивает значения 1vh и 1vw, выбирая меньшее из них.

1vmax делает то же самое, но выбирает большее из двух значений.

Другими словами, если у телефона или планшета ширина экрана меньше высоты, то vmin будет рассчитываться относительно ширины, а vmax будет рассчитываться относительно высоты экрана.