css-paged-media - cssを使用した印刷モードの各ページのヘッダーとフッター

Question

Web アプリケーションがあり、レポートが 1 ページを超える可能性があり、すべてのページにヘッダーとフッターを印刷したいと考えています。私はこれを見つけて試してみました: 各ページでレポートヘッダーを繰り返します が、うまくいきませんでした.うまくいきません。

Answer 1

position: fixed;各ページで繰り返されるようにヘッダーとフッターを設定できます

例えば

<header class="onlyprint"><!--Content Goes Here--></header>
<footer class="onlyprint"><!--Content Goes Here--></footer>

@media screen {
    header.onlyprint, footer.onlyprint{
        display: none; /* Hide from screen */
    }
}

@media print {
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it's header */
    }
    footer.onlyprint {
        position: fixed;
        bottom: 0; /* Because it's footer */
    }
}

Answer 2

私はあなたの返事に本当に感謝していますが、私は以前にこの解決策（位置：固定）を使用しました、そしてページのコンテンツはヘッダーによってマスクされます。そのため、「Margin」プロパティでのみ機能する「@page」を使用する必要があり、「Content」は機能しません。つまり、希望する結果に到達できません。

Answer 3

現在、Webkitエンジン（https://bugs.webkit.org/show_bug.cgi?id=100075）にバグがあり、フッターが完全に置き忘れられています。