「印刷」モードで各ページの上に表示されるDIVを条件付きで選択するにはどうすればよいですか？

Question

私は、ユーザーのやりとりで動的に作成されたページを持っていて、可変サイズの他のネストされたコンポーネントを持つDIVがたくさんあります。いくつかは並べて表示され、いくつかは次の行に表示されます。私はwindow.print()をコールすると、彼らは私が各印刷ページの一番上の画像でヘッダを追加したいのですが、position: fixedを使用して（クロムまたはSafariで動作しません

@media print { .myDiv { page-break-inside: avoid; } } 

の助けを借りて、各ブラウザによって再編成されています03-31-2016現在）。ユーザーは常に余白を変更できるので、ページサイズやコンポーネントの高さを計算したくありません。

私は動的に各<div class="myDiv">前に別の<div class="print-header">を追加することができます考えると、私はこのような何かしたいと思う：

@media print { 
    .print-header { display: none; } 
    .print-header:first-of-the-page { display: block; } /*pseudo css*/ 
} 

JSソリューションがあまりにも許容されています。

---

詳細[2016年4月1日に追加]

元の問題：クロムは、Firefox、Safariの上の全ての印刷ページのヘッダとしてロゴ（<img>）を設定しますIE11（ボーナス）。

オプション1： HTML5 APIを使用しています。 、NOT AVAILABLE

オプション2：それだけでそれを示して、すべての印刷ページにONLY

ChromeとSafariでFFとIE FOR GOODの要素を表示する@media print { .print-header{ position: fixed}}を使用して1ページ目。印刷時に算出サイズおよび位置に基づいてヘッダを追加：MDNのPrinting a document

オプション3上のサンプルコードを参照してください。 ERRORこれはipageHeight + iによって定義された位置にヘッダ要素のjQuery.clone()を追加し、印刷ページ上に適合するそれらのどの予測するすべてのコンポーネントのwidthとheightを計算する手段

傾向0、1、.. n、nは、印刷された文書のページ数です。

オプション4：印刷ページの上部に表示される要素を条件付きで選択します。 最初の質問私は指定された親の下のタイプの第一子を取得するために:first-of-typeを使用することができますCSSで

。各印刷ページに第1子を似せる方法はありますか？ CSSやJSを使って、印刷時に各ページに属するものを知る方法はありますか？

---

関連リンク

どうやら彼らは明確な解決策を提供することはありませんが、私は何かを見逃している可能性があります

1. How to use HTML to print header and footer on every printed page of a document?
2. Print footer on every printed page from website, across all browsers (Chrome)
3. Having Google Chrome repeat table headers on printed pages
4. How to apply some styles to first and last elements on a print page?
5. Using CSS and/or jQuery for Printed Pages with Page Breaks

---

処置：Mozilla Contributorsで文書を印刷するにはCC-BY-SA 2.5の下でライセンスされています。ここで

Answer 1

は、HTMLやCSSで、前のタスクを達成する方法についてのサンプルです：

<div id="print-header"> 
    <img src="img/logo.png" width="200px" height="50px" > 
</div> 

#print-header{ display: none; } 
@media print { 
    #print-header { 
     display: block; 
     position: fixed; 
     top: 0pt; 
     left: 0pt; 
     right: 0pt; 
     text-align: right; 
    } 
} 

注： は、すべてのページのヘッダーを表示これはfixed on Chrome