打印页面上的隐形标题

我注意到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，运行代码，打开打印机预览并向下滚动到第二页 –

更新的解决方案，让我知道如果问题仍然存在。 –

不起作用，内容的第一页和第二页的填充不等于 –

打印页面上的隐形标题

回答

相关问题