本文介绍在静态网站中，仅使用 SCSS 实现一个 div 元素视觉上“撑满整个视口高度”，并通过负 margin 上移覆盖导航栏、同时向下延伸覆盖页脚的可靠方案。核心在于用 calc(100% + navHeight + footerHeight) 动态补足被外边距抵消的高度缺口。
本文介绍在静态网站中，仅使用 scss 实现一个 div 元素视觉上“撑满整个视口高度”，并通过负 margin 上移覆盖导航栏、同时向下延伸覆盖页脚的可靠方案。核心在于用 `calc(100% + navheight + footerheight)` 动态补足被外边距抵消的高度缺口。
在构建单页布局（如 Landing Page）时，常需某个模块（如 Hero 区域）视觉上突破常规文档流限制：不仅覆盖顶部导航栏（.nav），还要向下延伸至页脚（.footer）之上，形成全屏沉浸式效果。由于 .full-height 元素位于 .container 内，而 .container 本身受父级约束且 .nav 和 .footer 占据了页面上下空间，仅设 height: 100% 并施加 margin-top: -4rem 是不够的——它只继承了容器的当前高度（如 1500px），并未补偿被负边距“隐去”的顶部空间，更未覆盖底部留白。
✅ 正确解法是：用 calc() 主动扩展高度。
既然 .nav 高 4rem、.footer 高 6rem，那么为使 .full-height 在视觉上真正填满整个视口（从导航栏顶部到页脚底部），其总高度应为：100%（容器原始高度） + 4rem（向上覆盖导航） + 6rem（向下延伸至页脚） = calc(100% + 10rem)。
以下是优化后的 SCSS 片段（兼容性好，无需 JS）：
.nav {
width: 100%;
height: 4rem;
background-color: #FFE2E2;
}
.container {
height: 1500px; // 或根据实际需求设为 min-height: 100vh
display: flex;
flex-direction: row;
justify-content: space-around;
}
.full-height {
background-color: red;
opacity: .5;
margin-top: -4rem; // 向上偏移，覆盖导航栏
height: calc(100% + 10rem); // 关键：补足 nav + footer 的总高度
width: 200px;
}
.normal-column {
background-color: yellow;
opacity: .5;
height: 100%;
width: 200px;
}
.footer {
width: 100%;
height: 6rem;
background-color: #FFE2E2;
}
? 注意事项：
-
calc()中的单位必须统一（此处全用rem），避免px与rem混用导致计算失效； - 若
.container高度依赖内容（非固定值），建议将.container设为min-height: 100vh，再对.full-height使用height: calc(100vh + 10rem)，确保响应式一致性； - 负 margin 不影响文档流高度计算，因此必须显式增加
height来“填补缺口”； - 此方案完全基于 CSS，无 JavaScript 依赖，适合静态站点和 SEO 友好场景。
通过这一技巧，你既能保持 HTML 结构语义清晰，又能精准控制视觉层叠关系，实现专业级全屏模块效果。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
