页脚“始终在最下方”应通过布局逻辑实现而非 position: fixed；推荐用 flex 布局（body 设 display: flex + column，main 加 flex: 1）或 css grid（grid-template-rows: auto 1fr auto），二者均需 body 设 min-height: 100vh 且 footer 为 body 直接子元素；仅当需悬浮视口底（如底部导航）时才用 position: fixed，并须处理遮挡、打印和无障碍问题。
页脚“始终在最下方”不是靠 position: fixed 硬钉，而是靠布局逻辑让它被内容或视口“托到底部”。真要固定在视口底（比如操作栏），才用 position: fixed；但多数场景下你真正需要的是 sticky footer——内容少时贴底、内容多时随内容走。选错方案会导致遮挡正文、打印异常、屏幕阅读器误读。
用 flex 布局实现 sticky footer（推荐）
这是目前最健壮、语义正确、无障碍友好的方式。关键不是让 footer 自己“固定”，而是让 main 占满剩余空间，把 footer 挤下去。
-
html和body必须设min-height: 100vh（不是height: 100vh），否则短页面下flex: 1没空间可分 -
body设display: flex+flex-direction: column，子元素顺序必须是header→main→footer -
main加flex: 1，它会自动吃掉所有剩余高度；footer不加任何定位、margin-top: auto或flex相关属性 -
header和footer建议显式设flex-shrink: 0，否则内容超长时可能被压缩（尤其含图片或行内元素时）
用 CSS Grid 实现三段式布局
适合结构清晰、需精确控制各区域比例的项目。Grid 天然支持语义化分层，且对响应式更可控。
-
body设display: grid+grid-template-rows: auto 1fr auto，三行分别对应 header / main / footer -
min-height: 100vh必须加在body上，否则1fr无参考高度 -
footer不要加position: absolute或bottom: 0，这会让它脱离 Grid 轨道，导致错位或不参与高度计算 - 若
header或footer高度不固定（如响应字号），auto行高仍可靠；而1fr会自动填满中间空隙
什么时候才该用 position: fixed？
只适用于真正需要“悬浮在视口底部、滚动不消失”的 UI 元素，比如移动端底部导航、快捷操作按钮。这不是页脚该做的事。
- 必须给
body加padding-bottom，值 ≥ 固定元素高度（如padding-bottom: 56px），否则正文最后一段会被遮住 -
z-index要设足够高（如z-index: 1000），但别盲目设 9999——可能干扰模态框等其他组件 - 打印样式表中
position: fixed元素默认不显示，需额外用@media print处理可见性 - 禁用在语义页脚上：它破坏文档流、影响屏幕阅读器朗读顺序、无法被聚焦（键盘用户跳过）
最容易被忽略的一点：无论用 flex 还是 grid，footer 必须是 body 的直接子元素。把它包进 div.wrapper 里却不给 wrapper 设 flex/grid，或者塞进 main 里，都会让它彻底退出布局上下文——此时再调样式也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
