使用 CSS Grid 的 1fr + 0 行高组合，并配合 height: min-content 覆盖 footer 所在行的 0 高度限制，可实现 header 固定、content 占满剩余视口、footer 实际渲染但不占用可视空间的效果。
使用 css grid 的 `1fr` + `0` 行高组合，并配合 `height: min-content` 覆盖 footer 所在行的 `0` 高度限制，可实现 header 固定、content 占满剩余视口、footer 实际渲染但不占用可视空间的效果。
要实现「header 固定高度、content 填满当前屏幕（即 100vh 减去 header/footer 高度）、footer 存在于 DOM 中但被推至屏幕可视区域之外」的效果，关键在于精确控制 Grid 行高行为，而非依赖 auto 或 minmax() 等常规方案。
核心思路是：将 .app-wrapper 的三行定义为 auto 1fr 0 ——
- 第一行（header）由内容决定高度（auto）；
- 第二行（content）用 1fr 占据所有剩余可用高度；
- 第三行（footer）设为 0，强制其所在网格轨道高度为 0，从而让 content 直接撑满整个 100vh；
⚠️ 但此时 footer 元素本身仍会因默认 height: auto 而“试图渲染”，导致布局异常或溢出。因此必须显式为 .footer 设置 height: min-content（或 height: fit-content / height: auto），使其脱离 0 行高的约束，按自身内容自然撑开——而由于该行轨道高度为 0，footer 将被“挤出”可视区域下方，视觉上完全不可见（但保留在 DOM 中，可用于后续 JS 操作或滚动加载）。
以下是完整、精简且符合语义的实现代码：
* {
margin: 0;
box-sizing: border-box;
}
body {
background-color: #eee;
/* 移除 body 默认边距，确保全屏无间隙 */
}
.app-wrapper {
display: grid;
grid-template-rows: auto 1fr 0; /* 关键：第三行为 0 */
height: 100vh;
width: 100%;
}
.header {
background-color: lightcoral;
padding: 1rem;
font-weight: bold;
}
.content {
background-color: aqua;
padding: 1.5rem;
overflow-y: auto; /* 如需内容过长时内部滚动，避免整体页面滚动 */
}
.footer {
background-color: lightyellow;
padding: 0.75rem;
font-size: 0.875rem;
height: min-content; /* 关键：覆盖 grid row 0 的限制 */
}
<div class="app-wrapper">
<header class="header">Header — Fixed Height</header><main class="content"><h2>Main Content</h2>
<p>This area fills the entire remaining viewport height.</p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/ai/2829" title="Dataify"><img
src="https://img.php.cn/upload/ai_manual/001/246/273/6a04283c186e1521.png" alt="Dataify" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/ai/2829" title="Dataify" class="overflowclass">Dataify</a>
<p class="overflowclass">一款AI开发辅助工具，主要用于提供数据采集API、高质量数据集、代理服务、AI Token一体化供应，适合需要提升相关任务效率的用户。</p>
</div>
<a rel="nofollow" href="/ai/2829" title="Dataify" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
<p>Scroll inside if content overflows (with overflow-y: auto).</p>
</main><footer class="footer">Footer — Rendered but offscreen</footer>
</div>
✅ 优势说明：
- 纯 CSS 实现，无需 JavaScript；
- 语义化结构清晰（
/ / - 1fr 确保 content 始终响应式占满可用空间；
- 0 行高 + min-content 是稳定跨浏览器的 hack-free 方案（Chrome/Firefox/Safari 均支持）；
❗ 注意事项：
- 不要给 .app-wrapper 设置 overflow: hidden，否则可能意外裁剪 footer（尽管它已不在视口内）；
- 若需 footer 在用户滚动到底部时才出现（如“回到顶部”按钮），应改用 position: sticky 或 JS 监听 scroll，本方案仅适用于「始终隐藏 footer 视觉呈现」场景；
- min-content 在旧版 Safari 中兼容性较弱，如需支持 iOS
该方案简洁、高效，是现代 CSS Grid 解决“视口内独占内容区”需求的推荐实践。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
