固定的印刷頭與CSS3運行

不幸的是，頭只有1頁上顯示，是否支持現代瀏覽器中實現使用position: running固定打印頭，和如果是這樣，我怎麼能得到它每頁？

我試過了，沒有大的90px的餘量。

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

來源

2014-03-31 Adam Rackis

您是否嘗試過'running-head：title'？ [有關'跑步頭]的更多信息]（http://www.w3.org/TR/WD-css2-971104/page.html）。另外，你在使用飛碟嗎？ –

@Zach - 不，不使用飛碟。這只是我想從瀏覽器正確打印的html。現在試試跑題：標題。 –

@Zach - 你有運行頭的代碼示例，你可以作爲答案張貼嗎？ –

看來，雖然你的語法正確，瀏覽器不支持position: running或running-head呢。 It is still a W3C Editor's draft，於2014年3月11日更新，因此看起來我們可能在之後纔有這種能力，但已經提出了多年。這很可能是因爲W3C認爲這應該由瀏覽器的打印功能來處理。你可以看到，如果你的瀏覽器目前支持該功能in this jsFiddle（警告：打開打印頁）

我建議你使用自定義設置@media print達到現代的瀏覽器做你想要做什麼。這並不需要你有打印的每個頁面的元素，雖然，每一次重複（隱藏在網頁視圖）標題

.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製造商爲每個頁面添加標題

來源

2014-04-01 01:34:26

嗯 - 我擔心這將是答案 - 感謝花時間寫這個。 –

@AdamRackis還使用僞元素添加了相同類型的方法 –

固定的印刷頭與CSS3運行

回答

相關問題