在使用 display: flex + height: 100% 实现页脚粘底时，position: sticky 头部常因父容器高度截断而失效；根本解法是避免依赖 body { height: 100% }，改用视口单位与最小高度组合，并确保 sticky 元素的祖先容器具备滚动上下文。
在使用 `display: flex` + `height: 100%` 实现页脚粘底时，`position: sticky` 头部常因父容器高度截断而失效；根本解法是避免依赖 `body { height: 100% }`，改用视口单位与最小高度组合，并确保 sticky 元素的祖先容器具备滚动上下文。
当页面采用 Flexbox 布局实现「页脚始终贴底」（Sticky Footer）时，常见的写法是设置 html, body { height: 100% } 并让 body 成为 flex 容器。但这一做法会意外破坏 position: sticky 的行为——因为 sticky 要求元素在其包含块内拥有明确的滚动上下文，而 height: 100% 会使 body 高度被严格限制为视口高度，导致内容溢出时 body 不产生滚动，sticky 失去生效前提，头部随之“消失”。
✅ 正确解法：移除 height: 100%，改用 min-height: 100vh + flex 布局
html {
/* 移除 height: 100% */
}
body {
margin: 0;
min-height: 100vh; /* 关键：保证至少占满视口，内容多时自动撑高 */
display: flex;
flex-direction: column;
}
header {
position: sticky;
top: 0;
background: #fff;
z-index: 100;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
main {
flex: 1; /* 自动填充剩余空间，确保 footer 被推至底部 */
}
footer {
/* 无需 position: sticky —— flex 布局天然保障其位于底部 */
background: #333;
color: white;
padding: 1rem;
text-align: center;
}
同时，确保
<header>Sticky header</header><main><!-- 大量内容触发垂直滚动 --><div style="height: 200vh; background: #f9f9f9;">Scrollable content...</div> </main><footer>Footer - always at bottom</footer>
⚠️ 注意事项：
- ❌ 不要给 body 设置 overflow: hidden 或固定 height；
- ✅ sticky 元素必须位于具有滚动能力的祖先内（此处为 body，因其 min-height: 100vh + 内容溢出自然形成滚动）；
- ✅ 若需兼容旧版 Safari，建议添加 -webkit-sticky 前缀；
- ? 避免对 footer 也设 position: sticky（如原答案所提）——这会导致页脚在滚动中悬浮，违背“始终贴底”需求；正确方式是依靠 flex: 1 让 main 占据剩余空间，从而自然将 footer 推至可视区域最下方。
该方案兼顾语义清晰、兼容性强与维护性高，是现代 CSS 中实现「粘性头部 + 粘性页脚」的推荐模式。
