footer不自动到底部需父容器撑高：html和body设height:100%，body用flex column，main设flex:1，footer自然沉底；禁用fixed避免脱离文档流。
footer不自动到底部，得靠父容器撑高
写个 <footer></footer> 标签，浏览器不会把它“钉”在页面最底下——它只是语义容器，位置完全由 DOM 顺序和 CSS 决定。常见现象是：内容少时 footer 悬在视口中间；内容多时又紧贴正文末尾、没留空。根本原因不是 footer 写错了，而是它的父容器（比如 ）没设高度约束。
必须让父容器有明确的最小高度，并启用弹性布局来分配空间：
-
和都要设height: 100%，否则min-height: 100vh在某些旧版 Safari 或嵌套场景下会失效 -
设display: flex; flex-direction: column - 主内容区域（推荐用
<main></main>）必须存在，且设flex: 1（等价于flex-grow: 1） -
<footer></footer>放在<main></main>后面，不加定位、不设高度，自然沉底
别用 position: fixed，除非你真需要悬浮底栏
加 position: fixed; bottom: 0; 看似简单，但后果明显：<footer></footer> 脱离文档流，不占空间，长页面底部文字会被盖住；打印时消失；屏幕阅读器无法按顺序读到它；移动端键盘弹出后 vh 失准，footer 可能错位。
如果非要固定（比如全站操作栏），请确认这是设计需求而非“偷懒方案”，并手动为 <main></main> 加 padding-bottom（值 ≥ footer 高度），或用 margin-bottom 预留空间。但对版权栏来说，这几乎总是错的。
立即学习“前端免费学习笔记（深入）”；
版权年份要不要自动更新？看场景
静态写死 © 2024–2026 My Site 最省事、最可靠，搜索引擎友好，无 JS 依赖，无障碍兼容性好。
若坚持动态年份，一行内联 JS 就够：
<footer>© <script>document.write(new Date().getFullYear())</script> My Site</footer>
注意两点：
- 部分爬虫或禁用 JS 的环境会看到空年份，SEO 效果打折扣
- 别用
new Date().getFullYear()包裹整个版权字符串再document.write—— 容易因执行时机问题导致渲染断裂
小屏下 footer 链接堆叠混乱？用 flex-wrap 控制换行
页脚里一堆链接直接平铺，在手机上会挤成一长条、溢出或横向滚动。不能靠 width 硬切，得用弹性流控列：
- 给包裹链接的容器（如
<div class="footer-links">）设 <code>display: flex; flex-wrap: wrap - 每个栏目列（如
<div class="footer-col">）设 <code>flex-basis: 30%，比width: 30%更稳，Flex 会自动处理间隙 - 在
@media (max-width: 768px)中设flex-direction: column或flex-basis: 100%，强制垂直堆叠 - 链接用
<ul></ul>结构化，比纯<p></p>或<span></span>更易维护、语义更清
真正难的不是让 footer 到底，而是让它在内容极少时不出现在视口中间、在内容极多时不遮挡文字、在窄屏上不崩、在 JS 关闭时仍可读——这些细节一旦漏掉，用户第一眼就会觉得“这个网站不太专业”。
