使用 CSS Grid 的 1fr 与特殊行高技巧，可让内容区域自动填满视口剩余高度，同时将页脚“推离屏幕”，仅通过纯 HTML/CSS 即可实现无 JavaScript 的全屏布局。
使用 css grid 的 `1fr` 与特殊行高技巧，可让内容区域自动填满视口剩余高度，同时将页脚“推离屏幕”，仅通过纯 html/css 即可实现无 javascript 的全屏布局。
在构建单页应用或全屏式界面时，常需确保头部固定、主体内容占满当前视口（100vh），而页脚不占用可视区域——即“视觉上被推至屏幕外”。这并非依赖 overflow: hidden 或绝对定位，而是巧妙利用 CSS Grid 的行高分配机制。
核心思路是：将页脚所在行设为 0，再通过页脚自身的 height: min-content（或显式高度）强制其渲染，从而让 1fr 行独占全部可用空间，页脚则因父容器行高为 0 而被“压缩出视口”。
以下是精简可靠的实现代码：
body {
margin: 0;
background-color: gray;
/* 确保 body 不引入额外滚动或边距 */
}
.app-wrapper {
display: grid;
grid-template-rows: auto 1fr 0; /* header（自适应）→ content（弹性占满）→ footer（逻辑高度为0） */
height: 100vh; /* 关键：以视口为基准计算 1fr */
width: 100%;
}
.header {
background-color: lightcoral;
/* 无需指定 grid-area，靠源顺序 + 隐式网格线即可对齐 */
}
.content {
background-color: aqua;
}
.footer {
background-color: lightyellow;
height: min-content; /* 关键：覆盖 grid-template-rows 中的 0，使页脚仍能正常渲染自身内容 */
/* 也可用固定高度如 height: 40px；但 min-content 更语义化，适配动态内容 */
}
<div class="app-wrapper">
<header class="header">header</header><main class="content">content</main><footer class="footer">footer</footer>
</div>
✅ 关键要点说明：
- grid-template-rows: auto 1fr 0 中的 0 并非无效值，而是明确告诉 Grid 引擎：第三行不参与剩余空间分配，其基准尺寸为 0；
- height: min-content 作用于 .footer 元素本身，使其在行高为 0 的约束下仍能按内容撑开（现代浏览器支持良好），从而实现“存在但不可见”的效果；
- 若页脚需响应式高度（如多行文本），建议改用 height: fit-content 或配合 min-height 控制下限；
- 此方案兼容所有支持 CSS Grid Level 1 的浏览器（Chrome 57+、Firefox 52+、Safari 10.1+、Edge 16+），无需前缀；
- 注意避免在 .app-wrapper 上设置 padding 或 border，否则会破坏 100vh 精确性——如有需要，应通过内层元素或 box-sizing: border-box 调整。
该方法简洁、语义清晰，且完全脱离 JavaScript，是现代 CSS 布局中处理“全屏内容+隐藏页脚”场景的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
