时间戳

首页 > 解决方案 > 使用 flexbox 强制 div 填充页面的剩余高度

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

问题描述

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

我遵循了本教程但是我没有达到他们描述的效果：https ://css-tricks.com/boxes-fill-height-dont-squish/

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

我怎样才能做到这一点？

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;
}

标签： htmlcss

解决方案

让fill-heightdiv 使用所有可用空间min-height: 100%;，但是，嘿，没有空间可以填充，好吧，height: 100vh;照顾好它。

body {
  height: 100vh;
}

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

推荐阅读