使 div 始终占据页面的整个高度 - 上边距为负值

Question

在我的页面上，我有一个部分，我希望始终占据页面的整个高度并溢出导航栏和页脚。我将带有负边距的 div 移动到顶部，但无法使其延伸到底部。这是静态网站，因此只需使用 SCSS 即可完成。有人可以帮忙吗？

.nav {
  width: 100%;
  height: 4rem;
  background-color: #FFE2E2;
}

.container {
  height: 1500px;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}

.full-height {
  background-color: red;
  opacity: .5;
  margin-top: -4rem;
  height: 100%;
  width: 200px;
}

.normal-column {
  background-color: yellow;
  opacity: .5;
  height: 100%;
  width: 200px;
}

.footer {
  width: 100%;
  height: 6rem;
  background-color: #FFE2E2;
}

<div class="nav">
</div>
<div class="container">
  <div class="full-height">
  </div>
  <div class="normal-column">
  </div>
</div>
<div class="footer">
</div>

Answer 1

它有点脆弱（任何具有硬编码大小调整的布局都是如此），但您可以简单地将标题的高度添加到 div 的高度。

.nav {
  width: 100%;
  height: 4rem;
  background-color: #FFE2E2;
}

.container {
  height: 1500px;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
}

.full-height {
  background-color: red;
  opacity: .5;
  margin-top: -4rem;
  height: calc(100% + 4rem);
  width: 200px;
}

.normal-column {
  background-color: yellow;
  opacity: .5;
  height: 100%;
  width: 200px;
}

.footer {
  width: 100%;
  height: 6rem;
  background-color: #FFE2E2;
}

<div class="nav">
</div>
<div class="container">
  <div class="full-height">
  </div>
  <div class="normal-column">
  </div>
</div>
<div class="footer">
</div>