粘性页脚（Sticky Footer）是一种网页布局技术，确保页脚始终位于页面底部。当页面内容较少时，页脚不会悬浮在页面中间，而是牢牢"粘"在浏览器窗口底部；当内容超出视口时，页脚自然跟随内容流到最下方。这避免了短页面中页脚尴尬地出现在屏幕中央的问题，提升了用户体验和专业感。

粘性页脚（Sticky Footer）：页脚在内容不足时位于视口底部，内容超出时随内容滚动到页面最下方。它参与文档流，不遮挡内容。

固定页脚（Fixed Footer）：使用 position: fixed; bottom: 0; 将页脚固定在视口底部，始终可见，不随滚动移动，可能遮挡页面内容。通常用于工具栏、Cookie提示等场景。两者本质不同，切勿混淆。

Flexbox方法只需3个核心属性：display: flex; flex-direction: column; min-height: 100vh; 配合内容区 flex: 1; 即可实现。它代码简洁、语义清晰、无需额外wrapper元素、浏览器兼容性好（支持所有现代浏览器，包括IE11）。Flexbox自动处理弹性空间分配，是最优雅的解决方案。

CSS Grid使用 grid-template-rows: 1fr auto; 让内容区自动占据剩余空间，页脚自适应高度。Grid方法天然支持复杂的多列页脚布局，如果页脚内部需要网格排列（如链接分组、社交媒体图标等），使用Grid可以在同一布局体系中统一处理，代码更加一致。

1. 确认 html 和 body 的高度设置为 height: 100%; 或使用 min-height: 100vh;。
2. 检查是否有其他CSS覆盖了flex/grid属性（使用浏览器开发者工具检查）。
3. 确认内容区的 flex: 1;（flexbox方法）或grid行定义正确。
4. 检查是否存在外边距合并（margin collapse）问题。
5. 传统方法需要确保wrapper的 padding-bottom 与页脚高度一致，且页脚 margin-top 为负的页脚高度。

Flexbox和Grid方法在iOS Safari 10+、Android Chrome 均完美支持。100vh 在移动端需要注意：部分移动浏览器的地址栏显示/隐藏会影响vh的计算。如果遇到问题，可以使用 100dvh（动态视口高度，较新属性）或使用JavaScript辅助计算。传统Calc方法在移动端表现稳定，是保守选择。

Flexbox：首选，99%场景适用，代码最简洁。
CSS Grid：页脚内部需要复杂网格布局时选用。
传统方法：需要兼容非常老的浏览器（如IE9以下）时使用。
Calc()：页脚高度固定且不变的简单场景，快速实现。选择时应根据项目浏览器支持范围和页脚复杂度来决定。