Css 根据另一个图元的可见性设置一个图元的高度

我有两个div。顶部是菜单，底部是内容

菜单div的固定高度为30像素，内容div设置为calc100%-30px。现在，根据菜单是否隐藏，我必须在无菜单样式和菜单样式之间切换。很简单，但是

是否可以在内容样式中以某种方式引用菜单，以便通过菜单的可见性或其高度计算calc

大概是这样的：

#menu {
    height: 30px;
}

#content {
    height: calc(100% - #menu.height);
}

或者这个：

#content:if #menu:visible {
    height: calc(100% - 30px);
}

#content:if #menu:hidden {
    height: calc(100% - 0px);
}

您可以将隐藏类应用于菜单，并且假设您的div是同级，您可以使用

Css

---

让我们换一种方式思考：您的内容的高度为100%减去nabar的高度，这意味着在所有情况下，内容都应该占用导航栏留下的剩余空间

使用flex很容易，因为您只需将flex:1设置为内容。当您的导航栏以display:none或height:0隐藏时，或者即使您只需更改其高度，也可以这样做

.集装箱{ 显示器：flex； 弯曲方向：立柱； 边框：1px实心； 高度：200px； 边缘底部：20px； } .集装箱>导航{ 高度：30px； 背景：蓝色； } .container>div{ 弹性：1； 背景：红色； } 菜单 所容纳之物 菜单 所容纳之物

---

当菜单被隐藏时，元素仍在标记上？你怎么隐藏它？我们能看看你的实际标记结构吗？我是在对它进行伪编码。我当然显示：没有；隐藏它-或者改变内容的高度是不对的。。。。如果它们不是同级，则将类设置为公共父元素，并相应地使用后代选择器。是的，我已经考虑了标记的OP描述：一个在顶部，一个在底部。在这个特定示例中，我不认为内容可以作为菜单的子级包含，但是值得一提的是，不要说将内容放在菜单中，只要使用一个公共的父/祖先元素，比如f.e.body或html，它们在任何情况下都会存在，它们是兄弟。不确定到底发生了什么。~是某种if语句吗？尝试过搜索，但谷歌似乎忽略了搜索中的“~”。@Espen我的答案中有一个关于“兄弟将军”的链接selector@Espen你的生活变得更轻松；我们可以以不同的方式理解您的问题：如何使内容始终填满剩余空间，flex是解决方案：这将与display一起工作：无，即使您想更改高度作为参考，我也很可能在我的特定情况下使用flex，但我觉得我必须从@fcalderan中选择另一个答案作为答案，因为它更直接地解决了问题。@Espen是的，您可以自由选择您想要的答案：但请注意，另一个答案适用于某些特定情况，不能像flex解决方案那样是通用解决方案；

#menu { height: 30px; }
#menu.hidden { display: none; }

#content { height: calc(100% - 30px); }
#menu.hidden ~ #content { height: 100%; }