浏览器自动生成的打印页脚（如url、页码、日期等）无法通过css直接修改或移动，但可通过调整`@page`尺寸配合自定义页脚实现视觉上的“上移”效果。
在Chrome等现代浏览器中，原生打印页脚（即页面底部自动添加的网址、标题、页码和日期）由浏览器内核控制，不受任何CSS样式影响——这意味着 @page { footer { margin-bottom: 10px; } } 或 @page { margin-bottom: 10px; } 均无效，因为浏览器根本不支持对内置页脚的CSS选择与样式干预。
✅ 正确解法是：禁用原生页脚 + 自定义页脚 + 精确控制页面可打印区域高度。
具体步骤如下：
禁用浏览器默认页脚
在打印设置中手动关闭（Chrome：打印预览 → 取消勾选 Headers and footers），或通过前端提示用户操作（无法纯代码强制关闭）。创建语义化自定义页脚
使用
-
利用 @page 尺寸压缩“挤压”内容区域，使自定义页脚视觉上更靠近底部
减小 @page size 的高度（如A4标准为 297mm 210mm），相当于压缩可用内容区，从而将自定义页脚自然“顶”得更高：
@media print {
/* 关键：缩小页面高度，为自定义页脚腾出向上空间 */
@page {
size: 297mm 200mm; /* 原210mm → 减10mm，内容区整体上移 */
}
body {
margin: 0;
padding-bottom: 20mm; /* 预留底部安全边距 */
}
.print-footer {
position: fixed;
bottom: 5mm; /* 精确控制距离纸张底边的距离 */
left: 0;
right: 0;
text-align: center;
font-size: 10px;
color: #666;
margin: 0;
padding: 4px 0;
border-top: 1px solid #eee;
}
}⚠️ 注意事项：
- @page size 的修改仅影响内容布局区域，不改变物理纸张尺寸，打印机仍按A4输出；
- position: fixed 在打印中兼容性良好（Chrome/Firefox/Edge均支持），但需确保 body 无滚动干扰；
- 若需动态页码，可结合 @page :first 和 CSS计数器，或使用JavaScript生成（服务端渲染更稳定）；
- 测试务必在实际打印预览中进行，开发者工具的“打印媒体模拟”可能不完全准确。
通过该方案，你不再试图“移动不可控的浏览器页脚”，而是构建一个完全可控、可样式化、可定位的替代页脚，并利用页面尺寸微调达成所需的视觉对齐效果——这是当前Web标准下最可靠、跨浏览器兼容的实践方式。
