web-dev-qa-db-fra.com

Imprimer le pied de page au bas de la dernière page

J'utilise un tableau pour créer un pied de page sur chaque page (fonctionne dans Firefox, ça suffit).

Un JS Fiddle: https://jsfiddle.net/j9k2xzze/

(clic droit sur le volet de sortie -> Ce cadre -> Ouvrir le cadre dans un nouvel onglet. L'aperçu avant impression fonctionnera normalement)

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

Mais à la toute dernière page, le pied de table est affiché directement sous le texte. Si le texte est plus court que la dernière page, le pied de page s'y colle.

J'aime que le pied de page se trouve tout en bas de la dernière page . Malheureusement, l'extension @page ne fonctionne pas dans Firefox ou je ne le fais pas correctement:

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}
htmlcssfirefoxhtml-tableprint-css
21
LeMike

Si vous ne supportez que Firefox, c'est vraiment très facile (passez à la modification pour voir une technique qui fonctionne aussi dans IE, mais qui est moins polyvalente). Ajoutez simplement une grande marge inférieure à la fin de votre contenu. Il doit être suffisamment volumineux pour être garanti au-delà de la fin de la page. Le navigateur suppose que vous ne souhaitez pas imprimer une page vierge à la fin de votre document. Par conséquent, il supprime la marge nécessaire pour l'éviter, en en gardant juste assez pour placer votre pied de page au bas de la page.

Vous pouvez mettre la marge sur un pseudo-élément pour conserver votre code HTML, et vous pouvez utiliser @media print pour l'empêcher de s'afficher à l'écran.

Voici le code. Pour le voir fonctionner dans Firefox, ouvrez this jsfiddle , cliquez avec le bouton droit de la souris sur la sortie, sélectionnez Ce cadre> Afficher uniquement ce cadre, puis effectuez un aperçu avant impression.

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

Cette technique ne fonctionne dans aucun navigateur, sauf Firefox. Dans IE, lorsqu'un saut de page se produit dans une marge verticale, toute la marge est supprimée - ce qui est en fait le comportement correct selon le W3C (section 13.3.3) - mais ne vous inquiétez pas, le comportement de Firefox est effectivement identique sauf quand il y a un pied de table, et dans ce cas c'est en fait mieux, alors je doute que cela change jamais.

Chrome et les autres navigateurs Webkit (Safari, Opera) ne prennent même pas en charge les pieds de page répétés, ils sont donc inutiles. Je suppose que je n’ai pas testé cette approche dans Edge, mais je suis presque sûr que cela ne fonctionnera pas.

MODIFIER

Il existe une autre option qui fonctionne à la fois dans Firefox et IE. Tout ce que vous avez à faire est de placer le pied de page dans un <div> séparé et de le fixer au bas de la page, puis d'utiliser le <tfoot> répétant comme séparateur. Cette approche présente cependant quelques inconvénients mineurs (détails ci-dessous dans l'extrait de code).

Voici le code. Pour le voir fonctionner dans Firefox, ouvrez this jsfiddle , cliquez avec le bouton droit de la souris sur la sortie, sélectionnez Ce cadre> Afficher uniquement ce cadre, puis effectuez un aperçu avant impression. Dans Internet Explorer, cliquez dans le cadre de sortie, appuyez sur CTRL + A, effectuez un aperçu avant impression, puis remplacez "Comme affiché à l'écran" par "Comme sélectionné à l'écran".

@media print {
  #spacer {height: 2em;} /* height of footer + a little extra */
  #footer {
    position: fixed;
    bottom: 0;
  }
}
<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  <thead>
  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

<div id="footer">
  PAGE FOOTER
</div>

La principale limite de cette méthode est qu’elle place un pied de page identique sur chaque page du travail d’impression, ce qui signifie que vous ne pouvez avoir aucune page avec un pied de page différent, ni aucun pied de page. De plus, étant donné que la hauteur de l’entretoise dépend de la hauteur du pied de page, vous devrez l’ajuster si la hauteur du pied de page change.

9
DoctorDestructo

Il n’est pas possible d’avoir le pied de page uniquement sur la dernière page si vous utilisez une position absolue ou fixe. Si vous souhaitez placer le pied de page en bas uniquement si la page n'est pas assez longue, utilisez la technique du pied de page collant qui ne nécessite pas de position absolue/fixe. Quelque chose comme ça

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.Push {
  height: 50px;
}

Si vous avez vraiment besoin d'un pied de page au bas de chaque page, je vous recommande de générer d'abord un fichier PDF, puis de l'imprimer. De toute façon, si vous devez imprimer des documents complexes, vous générerez d’abord des fichiers PDF, le css d’impression est très limité.

0
Matej Janovčík