通过 calc(100% + nav高度 + footer高度) 配合负上边距，可使元素视觉上突破容器限制、撑满整个视口高度，适用于静态网站的全屏覆盖布局需求。
通过 `calc(100% + nav高度 + footer高度)` 配合负上边距，可使元素视觉上突破容器限制、撑满整个视口高度，适用于静态网站的全屏覆盖布局需求。
在构建静态单页布局时，常需某个模块（如特色内容区或背景容器）视觉上贯穿整个视口高度，同时自然覆盖顶部导航栏（.nav）和底部页脚（.footer）。由于 .container 本身受父级流式布局约束，仅设 height: 100% 无法突破其边界；而单纯使用 margin-top: -4rem 只能向上偏移，底部仍会被截断。
核心解法是：用 calc() 动态补足被遮挡区域的高度。已知导航栏高 4rem、页脚高 6rem，合计 10rem，因此目标元素需在 100% 容器高度基础上额外延伸这 10rem：
.full-height {
background-color: red;
opacity: .5;
margin-top: -4rem; // 向上抵消导航栏高度，实现顶部覆盖
height: calc(100% + 10rem); // 100% 容器高 + 导航栏4rem + 页脚6rem
width: 200px;
}⚠️ 注意事项：
-
calc(100% + 10rem)中的100%是相对于其父容器（即.container）计算的，因此.container的高度必须明确（如示例中设为1500px），否则100%无基准； - 负
margin-top仅影响定位，不改变文档流高度，因此必须配合height: calc()才能真正“拉长”元素； - 若页面存在滚动，该元素将随容器滚动而延伸，确保视觉上始终铺满当前视口+固定区域；
- 推荐为
.full-height添加position: relative或z-index，避免被其他层遮挡。
此方案完全基于 CSS/SCSS，无需 JavaScript，兼容现代浏览器，是静态站点实现精准全高覆盖的轻量可靠解法。
立即学习“前端免费学习笔记（深入）”；
