html - 使用flexbox强制div填满页面剩余高度

Question

这个问题已经有答案了:

How can I make my flexbox layout take 100% vertical space? (4 个回答)

已关闭 2 年前。

我有一个页面，我想以这样的方式设置样式:我有一个导航栏，其下方有一个固定高度的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

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

body {
  height: 100vh;
}

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