印刷ページの見えないヘッダー

私は、Chromeがtheadをもう印刷ページのヘッダーとして受け入れないことに気付きました。印刷ページの見えないヘッダー

現在、私は位置固定を使用していますが、そのコンテンツサイズはゼロです。それを回避するために、固定サイズのラッパーを作成しました。しかし、それはちょうど最初のページで動作します。 2番目のページにはラッパーはありません。ヘッダーがテキストの上にあるためです。

位置を固定してコンテンツを押し下げるように指示する方法はありますか？

<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

であることが示され、コードを実行し、プリンタのプレビューを開き、2番目のページまでスクロールします。 –

更新された解決策、問題がまだ存在するかどうか教えてください。 –

が機能していない、内容の最初と2ページ目の詰め物が等しくない –

印刷ページの見えないヘッダー

答えて

関連する問題