web-dev-qa-db-fra.com

Imprimer en-tête/pied de page sur toutes les pages (mode d'impression)

<div id="header">header</div>
<div id="content">
    content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>

Je veux imprimer #header et #footer sur every page en mode d'impression. J'ai cherché beaucoup mais rien ne semble fonctionner, même position:fixed ne fonctionne pas comme prévu.

htmlcssprintingfixedrepeat
23
3zzy

Si vous êtes prêt à passer à des tableaux pour votre mise en page (pas nécessairement idéal), vous pouvez le faire avec les éléments <thead> et <tfoot>. Ils imprimeront en haut et en bas de chaque page:

<table>

  <thead>
     <!-- Will print at the top of every page -->
  </thead>

  <tbody>
     <!-- Page content -->
  </tbody>

  <tfoot>
     <!-- Will print at the bottom of every page -->
  </tfoot>

</table>

Une autre option consiste à utiliser display table-header-group et table-footer-group, mais la prise en charge multi-navigateurs n’est pas excellente:

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

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

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

Je pense que je suis arrivé trop tard :), mais je cherchais quelque chose comme ceci et j'ai trouvé une réponse qui m'aide (source https://www.youtube.com/watch?v=yDgFLysON98 ) . J'ai écrit la balise div avant et après le contenu, comme ceci

<div id="header">Top div content</div>

.
.
.
<div id="footer">Bottom div content</div>

Exemple:

<!DOCTYPE html>
<html>
<head>``
<style>
body {
    background-color: #CCC;
    margin:48px 0px 0px 64px;
}
div#header {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
div#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>

... J'espère que ça aide.

5
Oscar Albert

Pour cela, vous devez utiliser le mso (Microsoft Office css properties) dans votre style:

<style><--
@page 
{
    size:21cm 29.7cmt;
    margin:1cm 1cm 1cm 1cm; 
    mso-title-page:yes;
    mso-page-orientation: portrait;
    mso-header: header;
    mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
2
Vincent Teyssier

La réponse de Nisse Engstroms est correcte. Il vous suffit de placer le contenu thead et tfoot dans un tr pour le faire fonctionner. C’est également la meilleure méthode car, lorsque vous utilisez le positionnement absolu dans une div pour créer un en-tête et un pied de page, ils se superposent toujours au contenu de votre corps principal. page suivante.

    
    <table>
    
    <thead>
    <tr> !-- these are important
    <th id="header"> !--- these are important
        !--- content of header here
    </th>
    </tr>
    </thead>
    
    <tbody>
    <tr>
    <td>
    !---- main body here
    </td>
    </tr>
    </tbody>
    
    <tfoot>
    <tr>
    <th id="footer">
    
        !----- content of footer here
    </th>
    </tr>
        </tfoot>
    
        </table>

0
Shrey Gupta