html - 如何指定一个元素在分页后重新出现？

Question

背景:我有一个 PHP 脚本，它生成一个长的 HTML/CSS 文档，该文档使用 WkHtmlToPdf 转换为 PDF。

在文档的某一点，我们进入了一个动态区域，其中包含可变数量的条目，其中一些包含大图像。我想在每个页面上重绘标题。

澄清点:这是网页部分打印 View 中的重复标题，而不仅仅是整个页面的标题。

我希望如何通过 CSS 来做到这一点。例如(伪代码):

    #some_region:pagebreak {
      background-color: #fcc;
      border-color: #000;
      border-style: solid;
      border-width: 0 0 1px 0;
      content: "Our Header Here";
    }

当然，这个虚构的 CSS3 选择器并不存在!

是否有任何巧妙的 CSS hack 可用于在特定容器内的任何分页符后显示元素？

举例说明:https://scott.arciszewski.me/public/23277702.php

Answer 1

@media print 中的 position: fixed; header 怎么样？这将强制在每个打印页面上添加页眉。像这样的东西:

    @media screen {
        .print-header {
            display: none;
        }
    }

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