web-dev-qa-db-fra.com

en-tête et pied de page dans chaque page en mode d'impression avec css

J'ai une application Web dont le rapport peut dépasser une page et j'aimerais imprimer un en-tête et un pied de page à chaque page . Je trouve et j'essaie ceci: Répéter un en-tête de rapport sur chaque page mais cela n’a pas fonctionné pour moi.J’essaie d’opérer avec IE9, Firefox, Google Chrome mais ... Nothing.page-margin fonctionne bien, mais le contenu est ce que je veux et il ne fonctionne pas.

css-paged-media
18
Masoume Karvar

Vous pouvez définir un en-tête et des pieds de page position: fixed; afin qu’ils se répètent sur chaque page. 

Par exemple

<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

Il existe actuellement un bogue dans le moteur de kit Web ( https://bugs.webkit.org/show_bug.cgi?id=100075 ) qui entraîne des pieds de page totalement égarés.

5
Markus

J'apprécie vraiment votre réponse, mais j'ai déjà utilisé cette solution (position: fixed) auparavant et le contenu de la page serait masqué par l'en-tête. je dois donc utiliser "@page" qui ne fonctionne qu'avec la propriété "Marge" et le "Contenu" ne fonctionne pas ou en d'autres termes, je ne peux pas atteindre le résultat que je veux. 

5
Masoume Karvar

J'ai trouvé une solution qui a fonctionné pour moi et une seule qui fonctionne sans problème. 

En 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>

en 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