应使用语义化<footer>标签配合flex布局实现粘性底部，而非position: fixed；需设body为flex列容器并min-height: 100vh，main设flex: 1，确保footer位于文档流末端且可访问。
直接用 <footer> 标签，配合简单 CSS 定位和文字对齐即可实现合规、可访问、不遮挡内容的底部版权栏；别用 position: fixed 除非你真需要悬浮底栏（多数场景反而是 bug）。
为什么不能只靠 position: fixed 把 footer 钉在页面最底下
常见错误是给 <footer> 加 position: fixed; bottom: 0;，结果导致：内容短时 footer 盖住正文末尾；内容长时 footer 悬在半空、不随滚动到底；打印或屏幕阅读器体验断裂。真正的“底部”是指**文档流末端**，不是视口底部。
正确思路是让 footer 自然位于 HTML 结构末尾，并用 CSS 确保它不被内容挤上去（尤其当页面内容少时）：
- 确保
<footer>是<body>的最后一个子元素 - 给
<body>或包裹容器设最小高度（min-height: 100vh），再用 flex 布局把 footer “推”到底部 - 避免给
<footer>设固定高度后又忘记预留 margin/padding，导致文字贴边难读
flex 布局实现“粘性底部”（Sticky Footer）最稳
这是目前兼容性好（Chrome 29+/Firefox 20+/Safari 9+）、语义清晰、响应式友好的主流写法。核心是把 <body> 变成 flex 容器，主内容区域用 flex: 1 占满剩余空间，footer 自然被挤到最下：
立即学习“前端免费学习笔记（深入）”；
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
<body style="display: flex; flex-direction: column; min-height: 100vh;">
<header>...</header>
<main style="flex: 1;">...</main>
<footer style="text-align: center; padding: 1rem 0; background: #333; color: #fff;">
© 2024 My Site. All rights reserved.
</footer>
</body>
注意点：
- 必须给
<body>加min-height: 100vh，否则 flex 不会撑开 -
<main>必须存在且设flex: 1（或flex-grow: 1），不能用<div>替代语义化标签 - 如果用了 CSS Reset（如 normalize.css），检查是否重置了
body的margin，没清掉会导致顶部/底部留白异常
纯静态版权栏，够用就别加 JS
不需要动态年份？直接写死 © 2024 最省事、最可靠。非要自动更新年份，也只需一行内联 JS，别引入框架：
<footer> © <script>document.write(new Date().getFullYear())</script> My Site </footer>
但要注意：
- 搜索引擎和部分爬虫可能不执行 JS，静态文本更利于 SEO
- 如果站点部署在无 JS 环境（如某些企业内网策略），JS 年份会显示为空白
- 用
document.write在现代页面中已不推荐，更稳妥是绑定到 DOM 加载后：document.querySelector('footer').textContent = '© ' + new Date().getFullYear() + ' My Site';
真正容易被忽略的是语义与可访问性：用 <footer> 而不是 <div class="footer">，能让屏幕阅读器识别为页面结束区域；同时确保版权文字字号不小于 12px、对比度 ≥ 4.5:1（比如深灰字配白底不够，得用黑字或深灰配浅灰底），否则移动端用户根本看不清。
