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

Question

我正在处理一个页面，该页面有一个 header 导航，然后是两行横幅图片，然后是横幅下方的 divs。

我想要实现的是让导航 div 成为设定高度 (90px)，然后让两行横幅平均分割用户浏览器的剩余视口高度。然后，让横幅下方的两个 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>

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

基本上，我所追求的是 'viewport height minus 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 中的 space 被拆分为： .nav 固定为 90px .bans 有相等的左边 space (100vh - 90px) / 2

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

Exclude height of existing div when setting viewport height for another div

html

css

height

viewport