通过 calc(100% + nav高度 + footer高度) 配合负上边距，可使元素视觉上撑满视口并溢出覆盖固定定位的导航栏和页脚，纯 CSS/SCSS 即可实现，无需 JavaScript。
通过 `calc(100% + nav高度 + footer高度)` 配合负上边距，可使元素视觉上撑满视口并溢出覆盖固定定位的导航栏和页脚，纯 css/scss 即可实现，无需 javascript。
在构建静态响应式页面时，常需某个区块（如全屏横幅、背景层或视差容器）视觉上覆盖整个视口高度，同时穿透顶部导航栏（.nav）和底部页脚（.footer）。由于 .nav 和 .footer 通常为固定高度的非绝对定位元素，直接设 height: 100vh 会导致内容被其遮挡或留白；而仅用 margin-top: -4rem 上移后，若仍保持 height: 100%，则底部无法延伸至页脚下方——因为 100% 是相对于父容器 .container 的高度（此处为 1500px），而非视口。
✅ 正确解法是：在 height 中主动补偿被遮挡的导航栏与页脚高度。
已知 .nav 高 4rem、.footer 高 6rem，合计 10rem，因此应设置：
.full-height {
background-color: red;
opacity: .5;
margin-top: -4rem; // 向上偏移，覆盖导航栏
height: calc(100% + 10rem); // 100% 父高 + 导航栏 + 页脚高度
width: 200px;
}
⚠️ 注意事项：
-
calc()中的单位必须统一（推荐全部使用rem或px），避免100% + 4px类混合单位错误； - 确保
.container本身具有明确高度（如示例中的1500px），否则100%无计算基准；若希望适配不同屏幕，可将.container设为min-height: 100vh，再对.full-height使用height: calc(100vh + 10rem)； - 负
margin-top仅影响布局位置，不改变文档流高度，因此必须配合增加height才能真正“向下延伸”； - 若后续添加
position: absolute或fixed，需重新评估定位上下文——本方案适用于常规文档流布局。
总结：calc(100% + Xrem) 是解决“负边距位移后高度不足”问题的核心技巧，兼顾语义清晰与兼容性（现代浏览器均支持），是静态站点中实现全屏穿透式布局的轻量可靠方案。
