Как в bootsrap5 растянуть ( !не прижать! ) блок до низа страницы?

Question

[MasterCopipaster]

Мне нужно растянуть блок до конца экрана (как показано на картинке).

Я пробовал использовать класс .h-100, но он растягивается намного больше, чем необходимо (не учитывает размер верхних блоков), поэтому есть прокрутка, которой не должно быть.
Собственно сам код https://jsfiddle.net/t1bpmkoy/
Помогите пожалуйста, уже несколько дней пытаюсь осилить, рецепты из интернета либо не работают совсем либо криво.

Answer 1

[Александр Талалаев]

Можно сделать на флексах
main - делаем минимум во весь экран и флех колонкой
последний элемент растягиваем во флексе и его делаем тоже флексом. Ну и его содержание растягиваем во флексе

Comments

[MasterCopipaster]

Спасибо - наконец то хоть кто то дал нормальное решение :)

Answer 2

[profesor08]

CSS никто не запрещал.

Comments

[MasterCopipaster]

Вы не находите этот ответ бесполезным? если бы я знал как это сделать на чистом css я бы не задавал вопросов.

[profesor08]

MasterCopipaster, нет, ответ решает задачу целиком и полностью. Бутстрап своим существованием предполагает, что ты будешь пользоваться его классами и разметкой, которую потом будешь модифицировать и стилизовать. Но, если так сильно хочется говнокодить на бутстрапе и превратить код в неподдерживаемый кусок, то можно упароться с h-100 и flex-.