React / Flexbox / SPA / Без полос прокрутки: проблема с сегментированием страницы в верхний / нижний колонтитул / содержимое / нижний колонтитул, занимающий всю страницу

Question

Надеюсь, ты в порядке.

Я создаю страницу в React, которая занимает 100% высоты просмотра и отключена переполнение. Моя проблема возникает, когда у меня есть анимированный нижний колонтитул, который пользователь может вызвать, который сокращает содержимое, чтобы освободить место для себя. Я описал это на следующем рисунке. Пожалуйста, извините орфографические ошибки .... Я некомпетентен.

Прямо сейчас у меня установлены верхний и нижний колонтитулы на абсолютное значение и они зафиксированы в верхней и нижней части страницы соответственно, и я пытаюсь получить содержимое вадаптироваться с помощью Flex Grow, но пока что это кажется безразличным ....

Спасибо за ваше время!

PS

Я почти уверен, что этот отстой ответит на мой вопрос,но я не получил ни одного из изменений гибкости, чтобы повлиять на него (эффект?).

Сделать div заполнить высоту оставшегося пространства экрана

Answer 1

Ваш нижний колонтитул и верхний колонтитул установлены как абсолютные, поэтому они исключаются из макета flexbox. Удалите position: absolute, установите для вашего основного контейнера (что бы это ни было, все 3 из них) значение display: flex; flex-direction: column, установите желаемый height для заголовка и нижнего колонтитула, а затем добавьте flex-grow: 1 в контейнер содержимого, чтобы он занимал всеоставшееся пространство