页脚不会自动贴底，需用flex布局实现：html和body设height:100%，body设display:flex、flex-direction:column、min-height:100vh，main设flex:1，footer作为body直接子元素保持默认流式布局。
页脚不是写个 <footer></footer> 就能自动贴底的，关键在 CSS 布局控制；用 position: fixed 看似快，但会盖内容、破坏打印和读屏体验，属于典型“省事反坏事”。
为什么 footer 总是悬在半空？
这是浏览器默认行为，不是 bug。<footer></footer> 是普通块级元素，DOM 位置虽在最后，但父容器（）没设高度约束，也没启用空间分配机制，它就只能紧贴主内容末尾排布。页面内容短时，自然离视口底部一大截。
-
和都要设height: 100%（旧版 Safari 兼容刚需） -
必须设display: flex; flex-direction: column; min-height: 100vh - 主内容区必须用
<main></main>标签，并加flex: 1（不能用<div> 替代） <li> <code><footer></footer>放在<main></main>后、前，不设height、不加position、不加margin-top - 必须闭合完整：
<footer>© 2024–2026 MySite</footer>，漏掉会导致后续所有 HTML 被吞进 footer 子树，JS 查不到节点，CSS 失效 - 必须是
的直接子元素，不能嵌套在<div id="app"> 或 <code><main></main>里 - 年份建议用区间（如
2024–2026）而非 JS 动态生成——避免 JS 未执行时空白、爬虫抓不到、禁用 JS 环境下失效 - 备案号必须带超链接：
@#@#@#@#@#@#@#@#@#@0，只写号码不算合规 - 给链接容器（如
<div class="footer-links">）设 <code>display: flex; flex-wrap: wrap - 每个栏目列（如
<div class="footer-col">）用 <code>flex-basis: 30%，比width更稳，Flex 会自动处理间隙 - 在
@media (max-width: 768px)中设flex-direction: column或flex-basis: 100%，强制垂直堆叠 - 避免对
<small></small>强制重置font-size——它语义就是“附属细则”，改了反而破坏可访问性
怎么写才合规又可访问？
版权信息必须是语义化、结构清晰、机器可读的内容，不是纯视觉装饰。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
多列链接或文字挤成一长条怎么办？
手机上 footer 里的平铺链接常溢出或强制横向滚动，本质是没做响应式流控。
真正难的不是写代码，而是想清楚：这个 footer 是文档逻辑结尾，还是视觉悬浮层？前者靠 flex 布局“撑到底部”，后者才用 position: fixed——而绝大多数版权栏，属于前者。
