通过将 body 设为 flex 布局并配合 flex: 1 与 margin-top: auto，可实现内容区域自适应填充、页脚始终锚定视口底部的效果，无需 JavaScript，兼容现代浏览器。
通过将 body 设为 flex 布局并配合 `flex: 1` 与 `margin-top: auto`，可实现内容区域自适应填充、页脚始终锚定视口底部的效果，无需 javascript，兼容现代浏览器。
要让页脚（#footer-section）始终位于页面最底部（即使内容较短），同时与上方内容区域（#company-section）保持自然间距，核心思路是利用 Flexbox 的空间分配能力，而非依赖 margin-bottom: auto（该属性在非 flex 子元素上无效）。
关键在于将
本身设为一个垂直方向的 flex 容器，并确保其最小高度占满整个视口：body {
display: flex;
flex-direction: column;
min-height: 100vh; /* 必须设置，否则 flex 高度无基准 */
margin: 0; /* 移除默认 body 边距，避免干扰布局 */
}
#company-section {
flex: 1; /* 占据所有剩余可用空间，推下页脚 */
display: flex;
flex-direction: column;
align-items: center;
}
#footer-section {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: auto; /* 关键：自动占据上方所有剩余空白，使页脚“粘”到底部 */
}
对应的 HTML 结构保持简洁清晰：
<section id="company-section"><div class="company-alignment">
<p>Imprint</p>
</div>
</section><section id="footer-section">
Hi
</section>
✅ 注意事项：
- min-height: 100vh 是必需的——它为 flex 容器提供高度参考，否则 flex: 1 无法生效；
- 不要给 #company-section 或 #footer-section 设置固定高度或 height: 100%，这会破坏弹性行为；
- margin-top: auto 仅在 flex 容器中对直接子元素有效，因此必须确保 #footer-section 是 body（flex 容器）的直系子元素；
- 若页面内容高度超过视口（即需滚动），页脚会自然跟随内容底部，而非悬浮固定——这是「sticky bottom」而非「fixed footer」，符合语义化与无障碍要求。
该方案简洁、健壮、无副作用，是现代 CSS 实现“内容撑开 + 页脚沉底”布局的推荐实践。
