修复了运行 CSS3 的打印页眉答案

【问题标题】：Fixed Printed Header with CSS3 Running修复了运行 CSS3 的打印页眉
【发布时间】：2014-05-11 06:23:39
【问题描述】：

我正在尝试使用position: running 实现固定打印标题，如here 所述

不幸的是，在 Chrome 和 FF 中，标题仅显示在第 1 页上。现代浏览器是否支持此功能，如果支持，我如何才能使其显示在每个页面上？

我已经尝试过使用和不使用 90 像素的大边距。

<html>
<head>
    <style type="text/css">
            div.header { display: none }
            @media print {
                div.header {
                    display: block;
                    position: running(header);
                }
                @page { @top-center { content: element(header) }}
                @page { margin-top: 90px; }
            }
    </style>
</head>
<body>

<div id="header" class="header">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>

    Lorem ipsum dolor sit amet, denique adversarium cum ei. Mea lobortis antiopam in. Pro ex congue ceteros. Vel clita eruditi pericula ea, no everti delicatissimi vis, adhuc oportere in vix. Forensibus interesset qui ne, vis at senserit periculis. Rebum urbanitas ex eos, ei sea zril admodum sadipscing.<br><br>

Vim atqui corrumpit percipitur ad, elitr aliquam suscipit eum an. An graecis explicari sed, ad pri elit iudico expetenda. Quis harum audiam at mel, ea modus atomorum assueverit has. In movet tollit cum, idque oblique vis ut.<br><br>

Vel ex dicunt discere temporibus. Ullum consul molestiae has cu, vel liber definitiones no. Sed ut ridens perpetua, vis ex facer velit patrioque. Has idque iriure delectus te. No dicta diceret accommodare vel, has omnium antiopam ne. Deleniti efficiantur vis id, oratio epicuri forensibus ne vis.<br><br>

Eum an mazim nonumy. Consul delectus cu vis, nihil delectus conceptam et usu. Quem laoreet nonumes te mea. Movet consul et mei, possim numquam id per.<br><br>

Ea vel summo dolorem expetenda, te justo lucilius sit. Id vel hinc accusamus assueverit, ea vis errem animal. Id vis dico vide velit, forensibus voluptatum id ius. Ponderum facilisi te per, nobis neglegentur id his, impetus minimum per an. Quod exerci aeterno ius eu, ne vix meis nonumes deterruisset, dolor complectitur ex per.<br><br>

Et iudico platonem mei, cu erant denique vel, no labores dissentiet ius. Ne quis meis sed. Ei vel ullum ignota molestiae, congue vocent similique at has. Ne per delenit inciderint.<br><br>

Enim iracundia incorrupte in eam, sit in assum tincidunt. Id per diam deseruisse, qui no praesent temporibus consequuntur, eos te elit ceteros referrentur. Esse eleifend omittantur sea ei, usu cu maiorum contentiones, eum fabulas dignissim ei. Eu quo inani melius, et autem omnesque sit.<br><br>

[.....tons more text.....]

</body>

</html>

【问题讨论】：

你试过running-head:title吗？ More info on running-head。另外，你用的是飞碟吗？
@Zach - 不，不使用飞碟。这只是我想从浏览器正确打印的 html。现在将尝试 running-head: title。
@Zach - 你有运行头的代码示例可以作为答案发布吗？
回顾老问题。你解决过这个问题吗？
@Zach - 不 - 看起来共识是浏览器根本不支持这一点。可惜。

标签： html css media-queries

【解决方案1】：

看起来虽然你的语法是正确的，但浏览器还不支持position: running 或running-head。 It is still a W3C Editor's draft，在撰写本文时于 2014 年 3 月 11 日更新，所以看起来我们以后可能有这种能力，但它们被提出已经有好几年了。这很可能是因为 W3C 认为这应该由浏览器的打印功能处理。您可以查看您的浏览器当前是否支持此功能in this jsFiddle（警告：打开打印页面）

我建议使用自定义 @media print 设置来访问现代浏览器以执行您想要执行的操作。这确实要求您为每个打印页面都有一个元素，每次都重复（隐藏在 webview 上）标题

.header { display:none; }
.container:first-of-type .header { display:block; } // Only show first
@media print { // Show the rest when printed
    .header { position:fixed; margin-top:-50px; display:block; }
    .spacer { padding-top:50px; }
}

Demo（警告：打开打印页面）

您也可以使用应用于容器的伪元素来执行类似的方法，从而消除每次对 h2 的需求。这仍然需要您有一个每次都包含一个完整页面的容器。 Demo（警告：打开打印页面）

话虽如此，您可以使用Flying Saucer（您链接的问题正在使用）来执行此操作，但它仅支持 CSS 2.1。其他替代方法，包括使用 PDF 制作工具为每一页添加标题

【讨论】：

嗯 - 我担心这会是答案 - 感谢您花时间写这个。
@AdamRackis 还使用伪元素添加了相同类型的方法