本文介绍使用 css flexbox 实现“页脚始终位于视口底部”的标准方案，适用于内容较少时避免页脚悬浮、内容较多时自然跟随页面滚动，并确保内容区与页脚之间留有合理空白。
本文介绍使用 css flexbox 实现“页脚始终位于视口底部”的标准方案，适用于内容较少时避免页脚悬浮、内容较多时自然跟随页面滚动，并确保内容区与页脚之间留有合理空白。
要实现页脚（#footer-section）始终贴靠页面最底部（而非紧贴内容末尾），同时在内容区（#company-section）与页脚之间保留自然间距，关键在于将
设为弹性容器，并合理分配主轴空间。核心思路是：
✅ 将 body 设为 display: flex + flex-direction: column，并设置 min-height: 100vh，确保其至少撑满整个视口高度；
✅ 让内容区域（#company-section）通过 flex: 1 占据所有剩余可用空间；
✅ 给页脚（#footer-section）添加 margin-top: auto，利用 Flexbox 的自动外边距特性将其“推”至容器底部——这是实现“粘底”效果最简洁可靠的方案。
以下是推荐的完整 CSS 实现：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0; /* 移除默认 body 边距，避免布局偏移 */
}
#company-section {
flex: 1; /* 关键：占据全部剩余垂直空间 */
display: flex;
flex-direction: column;
align-items: center;
}
.company-alignment {
width: 100%;
max-width: 1240px;
padding: 2rem 1rem; /* 可选：为内容区添加内边距提升可读性 */
}
#footer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: auto; /* 关键：强制页脚锚定到底部 */
padding: 1.5rem 1rem; /* 可选：保证页脚文字呼吸感 */
background-color: #f8f9fa; /* 可选：视觉区分 */
}⚠️ 注意事项：
- 不要对 #company-section 设置 margin-bottom: auto —— 它在非 Flex 子项上下文中无效，且无法驱动父容器布局；正确做法是控制父容器（body）的弹性行为。
- 确保 没有其他干扰样式（如额外 padding 或 margin），否则会影响 100vh 的精确计算。
- 若页脚需在长页面中随内容滚动（即不固定，仅“最低位置”显示），本方案依然适用；若需始终固定在视口底部（如悬浮底栏），则应改用 position: fixed，但此时不再属于“内容流式布局”，需另行处理。
- 所有现代浏览器均原生支持该 Flexbox 方案，无需前缀或 polyfill。
通过这一结构，无论 #company-section 内容多寡，页脚都会优雅地停驻于页面可视区域底部，且二者间自动形成清晰的垂直分隔，兼顾语义性与响应式健壮性。
