footer不自动到底部需父容器撑高：html和body设height:100%，body用flex column，main设flex:1，footer自然沉底；禁用fixed避免脱离文档流。

footer不自动到底部，得靠父容器撑高

写个

标签，浏览器不会把它“钉”在页面最底下——它只是语义容器，位置完全由 DOM 顺序和 CSS 决定。常见现象是：内容少时 footer 悬在视口中间；内容多时又紧贴正文末尾、没留空。根本原因不是 footer 写错了，而是它的父容器（比如 ）没设高度约束。

必须让父容器有明确的最小高度，并启用弹性布局来分配空间：

• 和 都要设 height: 100%，否则 min-height: 100vh 在某些旧版 Safari 或嵌套场景下会失效
• 设 display: flex; flex-direction: column
• 主内容区域（推荐用
  ）必须存在，且设 flex: 1（等价于 flex-grow: 1）
• 放在
  后面，不加定位、不设高度，自然沉底

别用 position: fixed，除非你真需要悬浮底栏

加 position: fixed; bottom: 0; 看似简单，但后果明显：

脱离文档流，不占空间，长页面底部文字会被盖住；打印时消失；屏幕阅读器无法按顺序读到它；移动端键盘弹出后 vh 失准，footer 可能错位。

如果非要固定（比如全站操作栏），请确认这是设计需求而非“偷懒方案”，并手动为

加 padding-bottom（值 ≥ footer 高度），或用 margin-bottom 预留空间。但对版权栏来说，这几乎总是错的。

版权年份要不要自动更新？看场景

静态写死 © 2024–2026 My Site 最省事、最可靠，搜索引擎友好，无 JS 依赖，无障碍兼容性好。

若坚持动态年份，一行内联 JS 就够：

HTML Text Extract

从HTML页面（URL、文件或标准输入）中提取主体内容文本，去除导航、页脚、广告和模板文本。可直接传递给readability_check或其他文本工具。

下载

<footer>© <script>document.write(new Date().getFullYear())</script> My Site</footer>

注意两点：

• 部分爬虫或禁用 JS 的环境会看到空年份，SEO 效果打折扣
• 别用 new Date().getFullYear() 包裹整个版权字符串再 document.write —— 容易因执行时机问题导致渲染断裂

小屏下 footer 链接堆叠混乱？用 flex-wrap 控制换行

页脚里一堆链接直接平铺，在手机上会挤成一长条、溢出或横向滚动。不能靠 width 硬切，得用弹性流控列：

• 给包裹链接的容器（如
  ）设 display: flex; flex-wrap: wrap
• 每个栏目列（如
  ）设 flex-basis: 30%，比 width: 30% 更稳，Flex 会自动处理间隙
• 在 @media (max-width: 768px) 中设 flex-direction: column 或 flex-basis: 100%，强制垂直堆叠
• 链接用
  结构化，比纯
  或 更易维护、语义更清

真正难的不是让 footer 到底，而是让它在内容极少时不出现在视口中间、在内容极多时不遮挡文字、在窄屏上不崩、在 JS 关闭时仍可读——这些细节一旦漏掉，用户第一眼就会觉得“这个网站不太专业”。