如何让div通过负上边距始终占满页面全屏高度？

我页面中有一个区块，希望它始终占满整个页面高度，并覆盖navbar和footer。已通过负上边距将该div向上偏移，但无法让它延伸至页面底部。这是静态网站，只能使用SCSS实现，求技术支持？

原CSS代码 #

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

原HTML代码 #

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

核心思路是利用**固定定位（fixed）**让目标区块脱离文档流，直接相对于视口定位，轻松实现覆盖导航栏和页脚且占满整个视口高度的效果，无需依赖父容器高度或负边距：

修改后的SCSS代码 #

// 重置默认样式，避免浏览器默认边距干扰
body {
  margin: 0;
  padding: 0;
}

.nav {
  width: 100%;
  height: 4rem;
  background-color: #FFE2E2;
  // 设置层级，确保导航栏在普通内容上方，但低于目标区块
  z-index: 1;
  position: relative;
}

.container {
  height: 1500px;
  display:flex;
  flex-direction: row;
  justify-content: space-around;
  // 给容器添加上内边距，避免普通内容被导航栏遮挡
  padding-top: 4rem;
}

.full-height {
  background-color: red;
  opacity: .5;
  width: 200px;
  // 固定定位，直接占满视口高度
  position: fixed;
  top: 0;
  bottom: 0;
  // 设置更高层级，确保覆盖导航栏和页脚
  z-index: 2;
}

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

.footer {
  width: 100%;
  height: 6rem;
  background-color: #FFE2E2;
  // 设置层级，确保页脚在普通内容上方，但低于目标区块
  z-index: 1;
  position: relative;
}

关键修改说明 #

• 给.full-height设置position: fixed，配合top: 0和bottom: 0，直接让区块从视口顶部延伸到底部，自动占满整个视口高度，无需手动计算高度或使用负边距。
• 给.nav和.footer添加position: relative和z-index: 1，同时给.full-height设置z-index: 2，确保红色区块能覆盖导航栏和页脚，普通内容不会被遮挡。
• 给.container添加padding-top: 4rem，抵消导航栏高度，避免黄色区块被导航栏遮挡。

如果需求是让区块占满整个文档高度（而非仅视口），可将position: fixed替换为position: absolute，同时给html和body设置高度和相对定位：

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  position: relative;
}

.full-height {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  // 其他样式不变
}

内容的提问来源于stack exchange，提问作者Malvinka