Javascript 如何有条件地选择显示在'；上每页顶部的div；打印'；模式

我有一个通过用户交互动态创建的页面，其中有许多大小可变的

DIV

s和其他嵌套组件。其中一些并排显示，一些将显示在下一行。调用

window.print（）

后，每个浏览器都会在

@media print{.myDiv{page break-inside:avoid；}

我想在每个打印页面顶部添加一个带有图像的页眉，但使用

位置：fixed

在Chrome或Safari上不起作用（截至2016年3月31日）。我不想计算页面大小或组件高度，因为用户可以随时更改页边距

考虑到我可以在每个

之前动态添加另一个

，我希望这样：

@media print{
.print标头{显示：无；}
.print头：页面{display:block；}/*pseudo css的第一个*/
}

JS解决方案也是可以接受的

---

更多详情[于2016年1月4日添加]

原始问题：设置一个徽标（

）作为Chrome、Firefox、Safari和IE11上所有打印页面的页眉（奖金）

选项1:使用HTML5 API不可用

选项2:使用

@media print{.print header{position:fixed}}

在所有打印页面上显示元素仅适用于FF和IE

在Chrome和Safari上，它只在第一页显示。请参阅MDN上的代码示例

选项3:根据打印时计算的大小和位置添加页眉易出错

这意味着计算所有组件的

宽度

和

高度

，以预测它们中的哪一个适合打印页面，然后在

pageHeight+i

定义的位置添加标题元素的

jQuery.clone（）

，其中

i

为0,1

n

和

n

是打印文档上的页面数

选项4:有条件地选择显示在打印页面顶部的元素初始问题

在CSS中，我可以使用它来获取给定父项下类型的第一个子项。有没有类似的方法可以让第一个孩子出现在每个打印页面上？有没有一种方法可以在打印时使用CSS或JS知道每个页面属于什么

---

相关链接

显然，他们不会提供明确的解决方案，但我可能遗漏了一些东西：

---

---

操作：按打印文档是根据获得许可的。

以下是一个关于如何使用HTML和CSS完成上一个任务的示例：

#打印标题{显示：无；}
@媒体印刷品{
#打印页眉{
显示：块；
位置：固定；
顶部：0pt；
左：0pt；
右：0pt；
文本对齐：右对齐；
}
}

注意：

---

在所有页面上显示页眉是一个很好的问题。如果你能提供更多的细节和一个具体情况的例子（可能是网页的图片？或JSFIDLE？）以及你想要打印的内容，我想你的文章会得到更多的关注。相关，但不包含任何针对Chrome/Safari的JS解决方案：添加了细节和上下文。Thx，@mareoraftI直接在Thx问题上添加了其他相关链接。Chrome的一个相关功能是从今天开始，现在标志显示在FF和Chrome的所有页面上；它仍然没有在Safari上出现。