使用 flexbox 强制 div 填充页面的剩余高度 [重复]

Question

我有一个页面，我想以这样的方式设置样式：我有一个导航栏，它下面有一个固定高度的 div，下面有一个灵活的 div，灵活的 div 包含两个水平排列的元素，灵活的 div 应该采用增加页面的剩余宽度。

我按照本教程进行操作，但没有达到他们描述的效果：https://css-tricks.com/boxes-fill-height-dont-squish/

我希望area-2 div 占据页面的剩余高度。

我怎样才能做到这一点？

Stackblitz：https://stackblitz.com/edit/js-bnrfcu?file=style.css

<div class="nav">
    <h1>Nav</h1>
</div>

<div class="area1">
    <h4>Area1</h4>
</div>

<div class="fill-height">
    <div class="area-2">
        <div class="area-2-a">
            <p>Area-2a</p>
        </div>
        <div class="area-2-b">
            <p1>Area-2b</p1>
        </div>
    </div>
</div>

.nav {
  height: 5rem;
  background-color: aqua;
}

.nav-spacer {
  margin-top: 5rem;
}

.area1 {
  height: 10rem;
  background-color: brown;
}

.fill-height {
  display: flex;
  flex-direction: column;
}

.fill-height > div {
  flex: 1;
}

.area-2 {
  display: flex;
  flex-direction: row;
  width: 100%;
}

.area-2-a {
  width: 20%;
  background-color: #4f90ff;
}

.area-2-b {
  width: 80%;
  background-color: #2b41ff;
}

Answer 1

您也可以将 body 设置为弹性列容器：

body {
  margin:0;
  min-height: 100vh;
  display: flex;
  flex-flow: column;
}

.nav {
  height: 5rem;
  background-color: aqua;
}

.nav-spacer {
  margin-top: 5rem;
}

.area1 {
  height: 10rem;
  background-color: brown;
}

.fill-height {
  display: flex;
  flex-direction: column;
  flex: 1
}

.fill-height>div {
  flex: 1;
}

.area-2 {
  display: flex;
  flex-direction: row;
}

.area-2-a {
  width: 20%;
  background-color: #4f90ff;
}

.area-2-b {
  width: 80%;
  background-color: #2b41ff;
}

<div class="nav">
  <h1>Nav</h1>
</div>

<div class="area1">
  <h4>Area1</h4>
</div>

<div class="fill-height">
  <div class="area-2">
    <div class="area-2-a">
      <p>Area-2a</p>
    </div>
    <div class="area-2-b">
      <p1>Area-2b</p1>
    </div>
  </div>
</div>

查看可能您的问题的副本： Fill remaining vertical space with CSS using display:flex How can I make my flexbox layout take 100% vertical space?

Answer 2

让fill-height div 使用min-height: 100%; 的所有可用空间，但是嘿，没有空间可以填充，好吧，height: 100vh; 会处理这个问题。

body {
  height: 100vh;
}

.fill-height {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}