Question

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

菜单div具有30像素的固定高度，并且内容div使用calc（100％ - 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);
}

Answer 1

您可以将hidden类应用于#menu，假设您的div是兄弟姐妹，您可以使用general sibling selector，例如

<强>的CSS

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

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

Answer 2

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

使用flex非常简单，因为您只需要将flex:1设置为内容。当您使用display:none或height:0隐藏导航栏或即使您只是更改其高度时，此功能也可用。

＆＃13;

.container {
  display: flex;
  flex-direction: column;
  border: 1px solid;
  height: 200px;
  margin-bottom: 20px;
}

.container>nav {
  height: 30px;
  background: blue;
}

.container>div {
  flex: 1;
  background: red;
}

＆＃13;

<div class="container">
  <nav>menu</nav>
  <div>content</div>
</div>

<div class="container">
  <nav style="display:none;">menu</nav>
  <div>content</div>
</div>

＆＃13;

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

2 个答案: