Bonjour à tous,
 
je vous expose mon problème :
 
je dois pouvoir imprimer une facture sans utiliser le format pdf. Pour cela j'utilise la fonction window.print() . Mon problème est que je voudrais pouvoir mettre un haut de page et bas de page identique sur chacune de mes pages. Pour info, le contenu principale de ma page est un tableau (en gros je voudrai header=>tableau=>footer sur chaque page). J'ai réussi à le faire en utilisant :
<style type=text/css media=print>
#enTetePrint {
  display: block;
  position: fixed;
  top: 0;
  right: 0;
  }
#piedPagePrint {
  display: block;
  position: fixed;
  bottom: 0;
  right: 0;
  }
 
</style>
 
Grâce à ce code, j'affiche le header et le footer sur chacunes des pages. Le problème est que mon tableau chevauche le header et le footer. Je voudrais donc dire à mon tableau tu commences à 3 cm du haut et 3 cm du bas sur chacune des pages afin de laisser de la place au pied et haut de page. Je n'ai pas trouvé de solution, j'ai essayé avec @page{ margin-top:3 cm; margin-bottom:3cm;} mais cela pousse le header, le footer et le table de 3cm. J'ai essayé des combinaisons avec @page et le table sans réussir. J'ai aussi essayé avec des thead, tfoot, tbody mais je n'ai pas été convaincu car premièrement, les navigateurs réagissaient différemment et deuxièmement le footer n'était pas tout en bas de la page mais juste après la fin du tableau pour la dernière page.
 
Je vous demande donc de l'aide pour pouvoir définir des marges mais seulement sur mon tableau. J'espère avoir été à peu prêt claire.
 
PS : j'utilise ce code :
 tr{
page-break-inside:avoid;
}
pour que les tr de mon tableau ne soit pas coupé. Petit problème, la bordure bottom de chaque <tr> de fin de page n'est pas visible sur le bas de la page mais seulement sur le haut de la prochaine page (sur le tr d'après en gros). Ca fait un peu bisar de pas avoir cette bordure, on a l'impression que le tr n'est pas fini.  

Après réflexion, j'ai opté pour la solution tfoot, thead, tbody. J'ai réglé les problèmes que cela posaient sur les différents navigateurs. Quand j'imprime, j'ai bien mon header, mon contenu, mon footer sur chacune des pages et sans chevauchement. Cependant je suis face à deux problèmes :
 
- Pour passer à la page suivante à chaque TR j'utilisais page-break-inside:avoid;
Cependant, maintenant cela n'est plus pris en compte. J'ai essayé avec page-break-after et before en auto ça ne fonctionne pas. En always ça fonctionne mais (et c'est logique) ça me fait beaucoup de feuilles pour pas beaucoup de contenu.
 
- il faut que le footer soit toujours tout en bas. Or sur la dernière page il est juste à la fin du tableau (logique aussi). Avec un height à 100% ça ne rend pas comme ça (encore moins sous IE). De plus si j'arrive à faire le saut de page quand un TR est coupé, le footer sera plus ou moins bas en fonction de la taille du TR le précédent.
 
Je pense pouvoir régler le problème pour la dernière page afin que le footer soit tout en bas, mais seulement pour la dernière page. Je vais compter le nombre de ligne et s'il n'y a pas assez de ligne pour que le footer soit tout en bas alors j'ajoute des br. (je fais cela en php car j'utilise des requêtes pour afficher le contenu)
 
Si vous comprenez pas ce que je dis, n'hésitez pas à poser des questions.
 
Merci d'avance

salut,
 
il faudrait que tu joignes du html en plus du css pour qu'on puisse faire des tests...
 

 en html ça donne ça :
 

 
En faite il y a 1 tableau me permettant de répéter le haut de page et bas de page avec les thead et tfoot. Ce tableau est composé de 3 autres tableaux. Le deuxième est celui qui a une taille variable en fonction de la facture que l'on a réalisé. C'est pour cela que je mets les page-break.
 
css :

 
J'espère que c'est plus claire et que ça aidera certains

Je déterre ce sujet, car je viens d'avoir la même problématique d'impression de courrier depuis un site web en générant logo en entête et pied de page.  
 
L'impression d'un seul page ne posse bien sur pas de problème : les balises <header> et <footer> suffissent.  
 
Cela ce complique dès que le courrier passe sur 2 pages. Pour le header, je n'avais pas de problème, car je le voulais que sur la première. un simple "position:absolute;" suffit à cela.  
Pour le footer, là, gros problème : il se superposait au texte de mon courrier.  
 
Dans mon cas, je ne pouvais pas utilisé la solution ci-dessus du thead/tfoot qui fonctionne bien, car mon courrier contenait déjà un table avec son propre entête / pied géré de cette manière.  
 
La réponse classique trouvée sur la toile est de mettre un "margin-bottom" sur le contenu de mon courrier pour réserver la place au <footer>. Dans les faits, cela ne fonctionne que pour la dernière page !
Mettre un "margin-bottom" sur @page est une meilleur idée ; sauf qu'il que la balise <footer> ne peut pas apparaitre dans cette zone libérée !
 
La solution est pourtant presque là : @bottom-center { content: "coucou"; } fonctionne lui !  
L'astuce final, c'est de remplacer ce texte par un fichier svg, soit :  
 

avec pied.svg :
 

Normalement la directive @page est faite pour ça en CSS, mais elle est plus ou moins bien reconnue par les navigateurs.
 
Exemple d'utilisation :
 

 
 
Infos sur @page