web-dev-qa-db-ja.com

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

Webアプリケーションを使用していて、1ページを超える可能性があるレポートがあり、すべてのページにヘッダーとフッターを印刷したいと考えています。私はこれを見つけて試してみます： 各ページのレポートヘッダーを繰り返す が、私にはうまくいきませんでした。opera、IE9、Firefox、Google Chromeしかし。 .. nothing.page-marginは正常に動作しますが、コンテンツは私が欲しいものであり、機能しません。

css-paged-media
19
Masoumeh Karvar

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 */
    }
}
19
Mr. Alien

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

6
Masoume Karvar

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

5
Markus

私はうまくいった解決策を見つけましたが、問題なく機能する唯一の解決策を見つけました。

HTMLで

<table>
        <thead><tr><td>
            <div class="header-space">&nbsp;</div>
        </td></tr></thead>
        <tbody><tr><td>
            <div id="pageHost" class="content"></div>
        </td></tr></tbody>
        <tfoot><tr><td>
            <div class="footer-space">&nbsp;</div>
        </td></tr></tfoot>
    </table>
    <header id="pageHeader">
    </header>
    <footer id="pageFooter">
        Custom Footer
        <div class="numberOfPages">

        </div>
    </footer>

cSSで

            header, .header-space,
            footer, .footer-space {
                height: 100px;
                font-weight: bold;
                width: 100%;
                padding: 10pt;
                margin: 10pt 0;
            }

            header {
                position: fixed;
                top: 0;
                border-bottom: 1px solid black;
            }

            footer {
                position: fixed;
                bottom: 0;
                border-top: 1px solid black;
            }
0
user10810851