Question

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

我想要实现的是将nav 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，接近我想要的值-但是，当横幅div计算视口高度时，是否有办法以某种方式合并90px导航div？

从本质上讲，我所追求的是大约50％的“视口高度减去90px” ...？

谢谢

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

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

1 个答案: