打印頁面上的隱形標題

我注意到Chrome不再接受打印頁面的標題。打印頁面上的隱形標題

現在我使用的位置固定，但它的「內容大小」爲零。爲了解決這個問題，我創建了一個固定大小的包裝器。但這只是在第一頁上。在第二頁上沒有包裝，因爲這個標題在文本上。

有沒有辦法告訴位置固定，它應該推下內容？

<style> 
    #headerWrapper { 
     display: block; 
     height: 50px; 
    } 

    @media print { 
     #header { 
      position:fixed; 
      top:0px; 
      left:0px; 
      width:100%; 
      color:#CCC; 
      background:#333; 
      padding:8px; 
      margin-left: 100px; 
     } 
    } 
</style> 

<body> 
    <div id="headerWrapper"> 
     <div id="header">HEADER</div> 
    </div> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
</body>

來源

2017-06-29 Mr.Tr33

請分享你的代碼。 –

現在有一個例子:) –

第1頁第2頁在上下滾動的意義上？ –

希望這個解決方案正常工作對您：

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<style> 
 
    
 
header { 
 
    font-size: 20px; 
 
} 
 

 
@media print { 
 
    html, body { 
 
    width: 210mm; 
 
    height: 297mm; 
 
    } 
 
    header { 
 
    position: fixed; 
 
    top: 0; 
 
    padding-bottom:5mm; 
 
    } 
 

 
    p { 
 
\t padding:5mm; 
 
    } 
 
} 
 
    
 
</style> 
 

 
<body> 
 
    <header>Header </header> \t 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
\t 
 
</body> 
 
</html>

來源

2017-06-29 12:13:58

nope，運行代碼，打開打印機預覽並向下滾動到第二頁 –

更新的解決方案，讓我知道如果問題仍然存在。 –

不起作用，內容的第一頁和第二頁的填充不等於 –

打印頁面上的隱形標題

回答

相關問題