用flex实现页头页脚布局的关键是：外层设min-height:100vh并flex-column，main用flex:1（非flex-grow:1），页脚高度需从视口高度中扣除以避免溢出。

直接用 Flex 实现页头页脚布局，关键不是“加一堆属性”，而是控制好三个容器的弹性关系：外层撑满视口、中间内容自动伸缩、页头页脚不抢空间。其他写法容易导致页脚悬浮、内容被遮或小屏错位。

body 设为 column flex 容器时必须设 min-height: 100vh

只写 height: 100% 不够——它依赖父元素高度，而 html 和 body 默认没高度。漏掉这步，flex: 1 的主内容就无法伸展，页脚会塌到内容末尾而不是视口底边。

• html, body { height: 100%; margin: 0; } 是基础，但不能替代 min-height: 100vh
• .wrapper { min-height: 100vh; display: flex; flex-direction: column; } 才是真正起效的最小高度保障
• 如果用了 body 直接当 flex 容器，也要给它加 min-height: 100vh，否则 Safari 旧版可能失效

main 区域用 flex: 1 而不是 flex-grow: 1

flex: 1 是 flex-grow: 1 + flex-shrink: 1 + flex-basis: 0 的简写，三者缺一不可。只写 flex-grow: 1 会让元素按内容宽度基准伸缩，反而在窄屏下撑破布局。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

• 错误写法：main { flex-grow: 1; } → 小屏时文字换行+高度突增，页脚被顶出视口
• 正确写法：main { flex: 1; } → 基准宽度为 0，纯靠 grow 填充剩余空间，行为稳定
• 若 main 内有固定高度组件（如 banner），需额外设 overflow: hidden 防止 flex 计算异常

页脚内容溢出时 gap 和 padding 的优先级要理清

页脚里塞了多列链接、版权文字、社交图标后，gap 和 padding 会叠加影响实际高度。尤其在移动端，gap: 1rem + padding: 1rem 可能让页脚高过预期，触发滚动条或遮挡内容。

• 先用 gap 控制子项间距（推荐），再用 padding 控制页脚整体内边距
• 避免在 footer 上同时设 padding 和 gap 后又加 margin，三者叠加易失控
• 小屏下改用 flex-direction: column 时，gap 仍生效，但 justify-content 失效，得靠 text-align: center 对齐文字

最常被忽略的是：页脚高度本身会影响 flex: 1 的可用空间。如果页脚用了 position: fixed 或 height: 60px，必须从 min-height: 100vh 里减去这个值，否则页面总高度会超视口——这不是 Flex 的错，是计算逻辑没闭环。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！