En-tête et pied de page d'impression HTML

Question

Est-il possible d'imprimer des pages HTML avec des en-têtes et des pieds de page personnalisés sur chaque page imprimée ?

J'aimerais ajouter le mot "UNCLASSIFIED" en rouge, Arial, taille 16pt en haut et en bas de chaque imprimé page, quel que soit son contenu.

Pour clarifier, si le document a été imprimé sur 5 pages, chaque page doit avoir l'en-tête et le pied de page personnalisés.

Quelqu'un sait-il si cela est possible en utilisant HTML/CSS ?

Merci d'avance !

Answer 1

Si vous prenez l'élément qui sera le pied de page et que vous le définissez comme étant position:fixed et bottom:0, lorsque la page sera imprimée, cet élément sera répété au bas de chaque page imprimée. Le même principe s'applique à un élément d'en-tête, mais il suffit de définir top:0 à la place.

Par exemple :

<div class="divFooter">UNCLASSIFIED</div>

CSS :

<style type="text/css">
    @media screen {
        div.divFooter {
            display: none;
        }
    }
    @media print {
        div.divFooter {
            position: fixed;
            bottom: 0;
        }
    }
</style>

Answer 2

Je pense que la réponse correcte est que HTML 5 et CSS3 ne prennent pas en charge l'impression des en-têtes et des pieds de page dans les pages de l'UE. print médias.

Et bien que vous puissiez être capable de le simuler avec :

• tableaux
• blocs à position fixe

ils présentent tous des défauts qui les empêchent d'être la solution générale idéale.

Answer 3

J'ai cherché pendant des années une solution et j'ai trouvé ce post sur comment imprimer un pied de page qui fonctionne sur plusieurs pages sans chevaucher le contenu de la page.

Mon exigence était IE8, jusqu'à présent j'ai constaté que cela ne fonctionne pas dans Chrome.

Cet exemple utilise des tableaux et l'élément tfoot en définissant le style css :

tfoot {display: table-footer-group;}

Answer 4

Utilisez Sauts de page pour définir les styles en CSS :

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

Ajoutez ensuite le balisage dans le document aux endroits appropriés :

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

Answer 5

De cette question -- ajouter les styles suivants à une feuille de style pour l'impression seulement. Cette solution fonctionnera dans IE et Firefox, mais pas dans Chrome (à partir de la version 21) :

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}