Свойство CSS min-height:
Вы можете применить свойство min-height: 100vh;к элементу контейнера. При этом минимальная высота элемента устанавливается равной 100 % высоты области просмотра, гарантируя, что он займет как минимум всю высоту экрана.

Flexbox:
Если вы используете flexbox для макета, вы можете установить для элемента контейнера display: flex;и flex-direction: columns;. Затем примените flex-grow: 1;к элементу контента, что заставит его расшириться, чтобы заполнить оставшееся вертикальное пространство.

JavaScript:
Вы можете использовать JavaScript для динамического расчета и установки высоты элемента контейнера на основе высоты экрана. Этого можно добиться, обратившись к свойству window.innerHeightи применив вычисленное значение к свойству style.heightконтейнера.