为另一个 div 设置视口高度时排除现有 div 的高度

Question

我正在处理一个具有标题导航的页面，然后是两行横幅图像，然后是横幅下方的几个 div。

我想要实现的是让导航 div 设置高度（90px），然后让两行横幅平均分割用户浏览器的剩余视口高度。然后，让横幅下方的两个 div 也固定像素高度。

这是我的精简代码的 sn-p：

html, body {
  margin: 0;
  padding: 0;
}

.nav {
  background: red;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banners-row-1 {
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.banners-row-2 {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50vh;
}

.mailing-list {
  height: 115px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 117px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="nav">
  This is the nav
</div>
<div class="banners-row-1">
  Banners Row 1
</div>
<div class="banners-row-2">
  Banners Row 2
</div>
<div class="mailing-list">
  Mailing List
</div>
<div class="footer">
  Footer
</div>

如您所见，两个横幅行设置为 50vh，这接近我想要的 - 但是，当横幅 div 计算视口高度时，有没有办法以某种方式合并 90px nav div？

基本上，我所追求的是“视口高度减去 90px”的 50%...？

谢谢

Answer 1

将您的导航和横幅包装到包装器中并使用以下 flex 属性：

html, body {
  margin: 0;
  padding: 0;
}

.nav {
  background: red;
  height: 90px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.ban {
  flex: 1;
}
.banners-row-1 {
  background: green;
  display: flex;
  justify-content: center;
  align-items: center;
}

.banners-row-2 {
  background: orange;
  display: flex;
  justify-content: center;
  align-items: center;
}

.mailing-list {
  height: 115px;
  background: pink;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer {
  height: 117px;
  background: lightblue;
  display: flex;
  justify-content: center;
  align-items: center;
}

<div class="wrap">
  <div class="nav">
    This is the nav
  </div>
  <div class=" ban banners-row-1">
    Banners Row 1
  </div>
  <div class="ban banners-row-2">
    Banners Row 2
  </div>
</div>
<div class="mailing-list">
  Mailing List
</div>
<div class="footer">
  Footer
</div>

它有效，因为 .wrap 中的空间被分割为： .nav 已固定 90px .bans 的剩余空间相等 (100vh - 90px) / 2