У меня есть приложение, которое имеет верхнее меню, заголовок, контент и нижний колонтитул. Высота содержимого составляет cal c (100vh - 40px) без заголовка в нижнем колонтитуле. Но мне нужно, чтобы содержимое автоматически изменяло размеры до высоты окна в зависимости от состояния скрытия / показа верхнего и нижнего колонтитула. Есть ли настройка CSS, чтобы сделать это без необходимости вручную вызывать функцию, чтобы проверить, есть ли верхний / нижний колонтитул, и соответственно отрегулировать высоту? Когда я скрываю верхний или нижний колонтитул или и то, и другое, контент просто перемещается и показывает пустое пространство.
Примечание: я перепутался с высотой, переполнением, отображением и позиционированием, но безрезультатно. Установка высоты в любое значение, кроме указанного c значения, например, 100vh, приводит к исчезновению содержимого.
<Menu style={{height: '40px'}} />
<div style={{height: 'calc(100vh - 40px)}}>
<Header style={{height: '40px'}} />
<Content style={{display: block}} />
<Footer style={{height: '40px'}} />
</div>