唯一可靠的跨浏览器打印页眉页脚方案是DOM+position:fixed+@media print，需配合占位空元素、显式高度设定及page-break控制；@page仅Chrome≥120支持静态内容，其余浏览器完全不支持。
打印时页眉页脚不能靠 @page 实现动态内容
Chrome ≥120 是目前唯一部分支持 @page { @top { content: "xxx"; } } 的浏览器，且仅允许静态字符串和 counter(page)；attr()、var()、图片、JS 生成内容全部被规范禁止。Firefox 和 Safari 解析到就跳过，不报错也不显示——这不是写法问题，是底层限制。
常见错误现象：@page { @top-center { content: attr(data-title); } } 在任何非 Chromium 浏览器里都为空白；content: var(--title) 直接无效，CSS 变量不在 @page 允许函数列表中。
- 若必须用
@page，只限基础页码：@page { @bottom-right { content: "Page " counter(page); } } -
counter(pages)在 Chrome “另存为 PDF” 中大概率显示NaN，不可用于交付文档 - 放弃
@page的页眉页脚区域，改用 DOM +position: fixed+@media print是当前唯一跨浏览器稳定方案
position: fixed 页眉页脚在打印中要配 page-break 防重叠
直接写 .page-header { position: fixed; top: 0; } 看似可行，但打印时多页内容会全部叠加在第一页上——因为 fixed 元素默认每页都渲染一次，且不参与分页流。
实操关键点：
立即学习“前端免费学习笔记（深入）”；
- 页眉/页脚高度必须显式设定（如
height: 2cm），并用同高空元素占位：.page-header-space { height: 2cm; }插入在正文最前 - 页脚同理：
.page-footer-space { height: 1.5cm; }插入在正文最后 - 正文容器（如
table或div）需加page-break-inside: avoid; break-inside: avoid;，否则长表格或卡片会被截断 - 避免对
display: grid或flex容器设分页属性——子项分页行为不可预测，应在外层包裹普通div
Grid 布局本身不参与打印分页，但可用来组织打印区域结构
CSS Grid 在打印场景中的作用不是控制“每页的页眉页脚”，而是帮你把打印内容区域（#printDom）本身组织得更可控：比如用 grid-template-areas 划分标题区、主表、备注区，再统一套进 @media print 规则里隐藏无关元素。
示例结构：
.print-container {
display: grid;
grid-template-areas:
"header"
"main"
"footer";
grid-template-rows: auto 1fr auto;
}
注意：grid-template-rows: auto 1fr auto 在打印中无实际分页意义，它只影响单页内布局；真正起作用的是 @media print 中对 .print-container 的 display: block、width: 210mm（A4 宽）、margin: 0 等重置。
- Grid 区域命名（
grid-area: header）可用于快速定位打印区域内的语义区块，方便 JS 动态注入内容 - 不要指望
1fr在打印时“撑满纸张高度”——打印上下文没有视口概念，1fr失效，必须用固定尺寸或page-break控制 - 含 SVG 或长图的容器建议加
max-height: 100vh; overflow: hidden;，防止图像撑破单页
真正可靠的打印页眉页脚，靠三件事闭环
缺一不可：DOM 元素 + fixed 定位 + @media print 包裹 + 占位空元素 + 分页控制。这不是权宜之计，而是当前所有主流浏览器（Chrome/Firefox/Safari/Edge）唯一共同支持的路径。
容易被忽略的细节：
-
body { margin: 0; }必须写在@media print里，否则默认外边距会让fixed元素偏移 - 页脚内部别写
height: 100%或display: flex—— 它会干扰自然高度计算，导致与占位空元素高度不一致 -
@media print规则必须集中定义，漏写媒体查询是 80% 打印失效的根源
