答案是使用Flexbox实现页脚固定布局：首先设置容器display: flex、flex-direction: column和min-height: 100vh，再给主体内容设置flex: 1使其撑满剩余空间，结合justify-content和align-items控制对齐，确保页脚始终位于底部。
实现页脚固定在页面底部的布局，是前端开发中常见的需求。使用 Flexbox 能轻松完成这一目标，无需计算高度或依赖 JavaScript。关键在于正确使用 align-items、justify-content 和容器的 flex 布局结构。
1. 基本HTML结构
要实现页脚固定，先确保页面结构清晰：
头部内容 主体内容
2. 设置Flex容器与高度控制
让容器占满视口高度，并启用 Flexbox 布局：
.container {
display: flex;
flex-direction: column;
min-height: 100vh; /* 关键：最小高度为视口高度 */
}
使用 min-height: 100vh 而非 height，可确保内容超出时页面仍能滚动。
立即学习“前端免费学习笔记（深入）”；
3. 让主体内容自动填充剩余空间
通过给主体内容设置 flex: 1，让它撑开占据可用空间，从而把页脚“推”到底部：
.content {
flex: 1;
}
这个属性等同于 flex-grow: 1，表示优先扩展以填满容器中未被占用的部分。
4. 对齐控制：align-items 与 justify-content 的作用
虽然在垂直布局中 justify-content 主要控制主轴（纵向）对齐，align-items 控制交叉轴（横向）对齐，但在页脚固定场景中，它们可用于微调：
- justify-content: space-between 可将 header 和 footer 分别置于顶部和底部，中间由 content 自动填充
- align-items: center 可使所有子元素水平居中（若不需要可设为 stretch）
示例：
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
justify-content: space-between;
align-items: stretch;
}
5. 实际效果与兼容性
这种方案在现代浏览器中表现良好。即使页面内容很少，页脚也会固定在视口底部；内容较多时，页脚自然位于文档流末尾。
注意避免给 body 或 html 设置 margin，可能影响高度计算。建议重置样式：
html, body {
margin: 0;
padding: 0;
}
基本上就这些。用 Flexbox 实现页脚固定，核心是容器设为 flex + 列方向 + 最小高度 100vh，再配合 flex: 1 撑开主体内容。align 和 justify 属性则用于增强布局控制，灵活调整对齐方式。不复杂但容易忽略细节。
