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

Question

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

我想要实现的是让nav div是一个设置的高度(90‘s)，然后让两行横幅均匀地分割用户浏览器的剩余视口高度。那么，有两个div下面的横幅也是固定的像素高度。

下面是我所摘除的代码片段：

​

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>

​

正如您所看到的，两行横幅设置为50 the，这与我想要的非常接近--但是，在横幅div计算视口高度时，有什么方法可以合并90 banner div吗？

本质上，我想要的是50%的视口高度减去90 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有固定的90 is .bans有相等的左空间(100 Is 90 Is)/2。