Next.js 14中Flex布局无法撑满高度的根本原因是html和body缺少显式min-height: 100vh，导致子级flex容器无高度基准；须在globals.css中全局设置html、body及根容器的min-height: 100vh，并在layout.tsx中用flex-col、flex-1和shrink-0实现页脚固定。
Next.js 14中Flex布局无法撑满高度的常见原因
直接在 layout.tsx 或 page.tsx 里写 display: flex; flex-direction: column; min-height: 100vh，页脚还是飘在中间——根本原因是 Next.js 14 的 App Router 默认不继承 body 的高度，且 SSR 渲染时 html 和 body 缺少显式高度控制。
必须手动补全这一层高度链：从 html → body → 根容器（如 html 下的 div 或 main）都要设 min-height: 100vh，否则 flex: 1 的主体区域没空间可伸展。
-
html和body在app/layout.tsx外部，需通过app/globals.css设置 - Next.js 14 默认启用 CSS Modules，若用全局样式，确保文件名是
globals.css（非globals.module.css） - 不要依赖
height: 100%，它在无明确父高时失效；一律用min-height: 100vh
Flex固定页脚的标准结构写法（App Router）
在 app/layout.tsx 中用 Flex 布局包裹子内容，关键在于容器设 flex-col、主体设 flex-1，页脚设 shrink-0（防止被压缩）：
min-h-[100vh]
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
