Feste Printed Kopf mit CSS3 Laufe

Ich versuche, einen festen Druckkopf position: running als here beschriebenFeste Printed Kopf mit CSS3 Laufe

Leider auf Seite die Kopfzeile wird nur angezeigt, sowohl in Chrome und FF verwenden zu implementieren 1. Ist die in modernen Browsern unterstützt, und Wenn ja, wie kann ich es auf jede Seite anzeigen lassen?

Ich habe es beide mit und ohne den großen 90px Rand versucht.

<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>

Quelle

2014-03-31 Adam Rackis

Haben Sie 'running-head: title' versucht? [Weitere Informationen zu 'running-head'] (http://www.w3.org/TR/WD-css2-971104/page.html). Verwenden Sie auch Fliegende Untertasse? –

@Zach - nein, keine fliegende Untertasse. Dies ist nur HTML Ich möchte korrekt aus dem Browser drucken. Will running-head: Titel jetzt versuchen. –

@Zach - haben Sie ein Codebeispiel für Running-Head, das Sie als Antwort posten können? –

Es scheint, dass, obwohl die Syntax korrekt ist, Browser position: running oder running-head noch nicht unterstützen. It is still a W3C Editor's draft, aktualisiert am 11. März 2014 im Moment des Schreibens dieses, so sieht es aus wie wir Mai haben die Fähigkeit später, aber es ist Jahre her, seit sie vorgeschlagen worden sind. Dies ist wahrscheinlich, weil W3C glaubt, dass dies durch die Druckfunktion des Browsers gehandhabt werden sollte. Sie können sehen, ob Ihr Browser diese Funktion derzeit unterstützt in this jsFiddle (ACHTUNG: öffnet die Druckseite)

Ich würde empfehlen, benutzerdefinierte @media print Einstellung verwenden, um moderne Browser zu erreichen, was Sie versuchen zu tun. Dies erfordert, dass Sie ein Element für jede Seite des Drucks haben aber jedes Mal, wenn der (versteckt auf Webansicht) Titel Wiederholung

.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 (ACHTUNG: die Druckseite öffnet)

Sie auch tun könnte ein ähnlicher Ansatz unter Verwendung eines Pseudoelements, das auf den Container angewendet wird, wodurch die Notwendigkeit für das h2 innerhalb jeder Zeit beseitigt wird. Dies erfordert jedoch immer noch, dass Sie einen Container haben, der jedes Mal eine vollständige Seite enthält. Demo (ACHTUNG: öffnet die Druckseite nach oben)

Mit diesem wird gesagt, Sie Flying Saucer verwenden kann dies (das ist die Frage, die Sie verknüpft mit) zu tun, aber es hat nur CSS 2.1-Unterstützung. Andere Alternativen, einschließlich der Verwendung eines PDF Maker, um jeder Seite einen Titel hinzuzufügen

Quelle

2014-04-01 01:34:26

Hmm - ich fürchtete, das wäre die Antwort - danke, dass du dir die Zeit genommen hast, das zu schreiben. –

@AdamRackis Auch die gleiche Art von Ansatz mit Pseudo-Elementen hinzugefügt –

Feste Printed Kopf mit CSS3 Laufe

Antwort

Verwandte Themen