纯HTML静态站可复用页脚应采用+原生JS注入方案：将页脚结构与data-bind锚点封装于中，用document.importNode()克隆并动态填充变量，避免fetch异步、file://协议限制及SEO问题，同时确保语义化标签和Flex布局撑满视口。

纯 HTML 静态站要做可复用页脚，别写 include、别配构建工具、更别动 PHP——直接用 + 原生 JS 注入，双击打开就能跑，所有现代浏览器包括 IE11 都认。

为什么不用 fetch() 加载独立 footer.html 文件

看起来最直觉，但实际踩坑密集：

• fetch() 是异步的，footer 渲染晚于主内容，SEO 抓取可能漏掉；
• 本地双击 .html 文件时，Chrome 禁止跨源 file:// 协议下的 fetch，直接白屏报错 Failed to fetch；
• 每个页面都要写一遍 fetch('footer.html').then(...)，复用性假高真低；
• 无法在 footer 里用 data-bind 动态插版权年份或备案号——你得额外写 JS 替换文本，逻辑散落。

用 封装 + document.importNode() 实例化

这才是真正“一次写、到处用、零配置”的方案。核心是把页脚结构和变量锚点都塞进 ，再用 JS 克隆注入。

示例（放在 或页面末尾）：

<template id="footer-template"><footer class="site-footer"><p class="copyright">© <span data-bind="year">2025</span> <span data-bind="company">MySite</span>. All rights reserved.</p>
    <div class="links">
      <a href="/privacy">隐私政策</a> | 
      <a href="/terms">服务条款</a> | 
      <a href="https://beian.miit.gov.cn"><span data-bind="icp">京ICP备12345678号</span></a>
    </div>
  </footer></template>

注入逻辑（单段 JS，所有页面共用）：

const template = document.getElementById('footer-template');
if (template) {
  const clone = document.importNode(template.content, true);
  // 动态填充变量
  clone.querySelector('[data-bind="year"]').textContent = new Date().getFullYear();
  clone.querySelector('[data-bind="company"]').textContent = 'Cate Cinema';
  clone.querySelector('[data-bind="icp"]').textContent = '京ICP备98765432号';
  // 插入到页面底部
  document.body.appendChild(clone);
}

响应式布局必须绕开 position: fixed 和 absolute

页脚“沉底”不是靠定位粘住视口，而是靠文档流撑满剩余空间。否则小屏上会遮按钮、滚动卡顿、Lighthouse 检测失败。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

推荐 CSS（作用于 body 及其子元素）：

html { min-height: 100%; }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
}
main { flex: 1; }
footer { /* 不设 height，不加 position */ }

关键点：

• footer 必须是 body 的直接子元素，不能套在 div#container 里——否则 Flex 不生效；
• 不要给 footer 设 margin-top: auto 或 align-self: flex-end，它天然在末尾；
• 移动端适配只靠媒体查询改 flex-direction: column 和 font-size，别碰布局模型。

语义与无障碍容易被忽略的细节

很多项目能跑、能看、甚至能过 W3C 校验，但一测无障碍就挂：NVDA 不读版权文字，Lighthouse 提示“缺少语义化页脚”。问题常出在三处：

• 用了
  而非

  —— 屏幕阅读器完全识别不出这是页脚；
• 在
  里嵌了
  或
  —— 它们是同级语义容器，不是父子关系；
• 把邮箱、电话等联系信息硬塞进
  ，没用
  包裹 ——
  才是语义正确的联系信息容器。

真正干净的页脚 DOM 结构，应该一眼看出层级：一个

，里面几个
或
，链接用 ，没有多余 wrapper。