在显示/隐藏时调整主div的大小

Question

我有一个具有顶部菜单，页眉，内容和页脚的应用程序。内容的高度为calc（100vh-40px），页眉中没有标题。但是我需要根据页眉和页脚的隐藏/显示状态自动将内容调整为窗口高度的内容。是否有CSS设置来执行此操作，而无需手动调用函数来检查页眉/页脚是否存在并相应地调整高度？就目前而言，当我隐藏页眉或页脚或两者时，内容将移动并显示空白。

注意：我搞砸了高度，溢出，显示和位置样式，无济于事。将高度设置为除特定值以外的任何值，例如100vh，使内容消失。

<Menu style={{height: '40px'}} />
<div style={{height: 'calc(100vh - 40px)}}>
   <Header style={{height: '40px'}} />
   <Content style={{display: block}} />
   <Footer style={{height: '40px'}} />
</div>

Answer 1

想通了。将display：flex和flex-direction：列放在div上，并将flex：1放在内容上。现在调整大小以显示和隐藏页眉/页脚。