本文介绍一种基于 Flexbox 的可靠方案，通过将 <body> 设为弹性容器，利用 flex: 1 占据剩余空间并配合 margin-top: auto 推动页脚到底部，确保无论内容多少，页脚始终位于视口最下方且与主体内容保持自然间距。
本文介绍一种基于 flexbox 的可靠方案，通过将 `
` 设为弹性容器，利用 `flex: 1` 占据剩余空间并配合 `margin-top: auto` 推动页脚到底部，确保无论内容多少，页脚始终位于视口最下方且与主体内容保持自然间距。要实现“页脚始终位于页面底部，且与上方内容保持间距”的效果，关键在于脱离传统 margin/padding 手动计算的思路，转而采用现代 CSS 弹性布局（Flexbox）进行流式控制。核心逻辑是：让整个页面容器（即 <body>）成为垂直方向的弹性主轴，使内容区自动撑满可用高度，再通过 margin-top: auto 将页脚“推”至底部。
✅ 正确实现步骤
设置 <body> 为 flex 容器
必须声明 display: flex 和 flex-direction: column，并添加 min-height: 100vh —— 这是关键，确保即使内容很少，容器高度也不低于视口，从而为 margin-top: auto 提供可作用的空间。赋予内容区弹性生长能力
给 #company-section 设置 flex: 1（等价于 flex-grow: 1; flex-shrink: 1; flex-basis: 0），使其自动填充 <body> 中除页脚外的所有剩余垂直空间。用 margin-top: auto 固定页脚位置
不要给页脚设 margin-bottom: auto（该属性在 flex 主轴为 column 时无效），而应在其自身上设置 margin-top: auto —— Flexbox 会将其沿主轴方向尽可能下推，紧贴容器底端。
以下是完整、经过验证的 CSS 示例：
body {
display: flex;
flex-direction: column;
min-height: 100vh;
margin: 0; /* 避免浏览器默认 body margin 干扰布局 */
}
#company-section {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 2rem 0; /* 可选：为内容区添加上下内边距，提升视觉呼吸感 */
}
.company-alignment {
width: 100%;
max-width: 1240px;
text-align: center;
}
#footer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 1.5rem 0;
background-color: #f8f9fa; /* 可选：便于识别页脚区域 */
margin-top: auto; /* ✅ 核心：推动页脚到底部 */
}对应 HTML 结构保持简洁清晰：
<body>
<section id="company-section">
<div class="company-alignment">
<h2>公司信息</h2>
<p>© 2024 XYZ 公司 · 商业登记号：XXXXXX</p>
<p>地址：北京市朝阳区某某路 123 号</p>
</div>
</section>
<section id="footer-section">
<p>Hi，这里是页脚</p>
</section>
</body>⚠️ 注意事项与常见误区
- ❌ 不要对 #login-section（或任意非 <body> 元素）设置 margin-bottom: auto 试图“拉”页脚 —— 在非 flex 容器中该声明无布局效果。
- ❌ 避免使用 position: fixed 或 absolute 实现页脚底部定位，这会导致页脚覆盖内容、不随滚动变化，且难以响应内容高度。
- ✅ 推荐始终为 <body> 添加 margin: 0，消除部分浏览器默认样式干扰。
- ✅ 若需页脚在长内容页面中“随内容滚动到底部”，而非始终悬浮于视口底部，请改用 sticky 或常规文档流布局；本文方案适用于“最小高度占满屏幕，页脚锚定底部”的典型法律页/落地页场景。
该方案兼容所有现代浏览器（Chrome 29+、Firefox 20+、Safari 6.1+、Edge 12+），无需 JavaScript，语义清晰、维护性强，是目前实现“粘性页脚（Sticky Footer）”最简洁可靠的 CSS 方式。
