采用Flexbox布局实现底部版权栏：body设flex-column和min-height:100vh，main用flex:1占剩余空间，footer自然置于底部；含动态年份与备案链接，无障碍友好且无需fixed或占位div。
直接可用的底部版权栏 HTML + CSS 结构
别抄那些用 position: fixed 盖住内容、或靠空 <div> 撑高度的老代码。下面这段是当前（2026年）真实项目里跑得稳、审核过、无障碍友好的最小可行结构：
<body style="display: flex; flex-direction: column; min-height: 100vh;">
<header></header>
<main style="flex: 1;">
<!-- 你的主内容 -->
</main>
<footer class="site-footer">
<p><small>© <span id="year">2024</span>–<span id="current-year">2024</span> MySite. All rights reserved.</small></p>
<p><small><a href="https://beian.miit.gov.cn" target="_blank" rel="noopener">京ICP备12345678号</a></small></p>
</footer>
<script>
const now = new Date().getFullYear();
document.getElementById('current-year').textContent = now;
// 若年份范围需动态更新，此处可加逻辑：若起始年 < now，则更新为 "2020–2024"
</script>
</body>关键点：body 是 flex 容器，main 吃掉所有剩余空间，footer 自然沉底；id="year" 和 id="current-year" 分开，方便未来扩展起始年份逻辑；备案链接用 rel="noopener"，不是 nofollow。
为什么不能只写 <footer>© 2024</footer>
单写这行看似简洁，但上线后大概率出问题：
-
footer默认是块级元素，但没设min-height或布局约束时，页面内容少就会悬在半空，不贴底 - 没包裹
<small>或设font-size，在小屏上文字会撑破容器、换行错乱 - 纯文本 © 符号在某些旧环境可能渲染成方块，必须用
©或 UTF-8 编码的 © 字符（推荐后者，但确保文件保存为 UTF-8 without BOM） - 没加备案链接或链接格式错误（比如 href 是
http://或带路径），国内监管扫描会判“未有效公示”
footer 里能放导航、搜索框或广告吗
不能。这是语义硬伤，不是样式问题：
立即学习“前端免费学习笔记（深入）”；
-
footer的规范用途是元信息：版权、备案号、隐私政策、联系方式（用<address>包裹）、许可声明（加rel="license"） - 把主导航塞进
footer，读屏软件会误读为“页面结尾操作区”，破坏浏览流 - 如果真要放次要链接（如“关于我们”“服务条款”），必须用
<nav aria-label="页脚导航">显式声明，且放在footer内部，不能替代它 - 广告、搜索框、登录入口一律该归到
<header>或独立<aside>，和footer无关
动态年份 JS 脚本容易踩的坑
年份自动更新看着省事，但实际部署时经常失效：
- 脚本放在
<head>里，但document.getElementById('year')找不到元素——DOM 还没加载，得包一层DOMContentLoaded或放到底部 - 用
querySelector('footer p')，结果页面有多个p，改错了位置；更稳妥的是加唯一 class，比如<p class="copyright-text"> - 模板用了 jQuery：
$('footer').text('© ' + new Date().getFullYear())，会清空所有子节点（包括备案链接），变成纯文本 - CSS 用
display: none隐藏了真实版权区域，JS 却在改一个看不见的元素——得先搜footer::before或.hidden类
真正难的不是让年份动起来，而是每次改完模板都得手动检查：footer 是否还撑开、是否在 iOS Safari 里触发点击热区塌缩、备案链接能否正常跳转——这些细节不测就上线，第一周就会被用户截图发群里问“你们网站底部怎么少了一半”。
