Pied de page Placez la page lors de l'impression en bas

Question

Je suis en train de jours pour savoir comment résoudre ce problème:

J'ai un rapport (complet HTML5 + CSS3) avec quelques pages. Le rapport est divisé par sections et chaque section a un en-tête, un contenu et un pied de page. Ainsi, une section est essentiellement composée comme:

<section> 
    <header></header> 
    <div>CONTENT</div> 
    <footer></footer> 
</section> 

Le problème est que le pied de page vient juste après la fin du contenu (voir la figure 1) lorsque dans la zone d'impression (Ctrl + P), quand il doit rester au fond de la section (voir la figure 2) ...

Je ne suis pas vraiment un maître de front et c'est devenu une douleur à réaliser! Pouvez-vous m'aider avec ça? Merci!

Figure 1:

Figure 2:

Answer 1

aller avec quelque chose comme ceci:

@media print { 
    #footer { 
     position: absolute; 
     bottom: 0; 
     display: none; 
    } 

    @page: last { 
     #footer { 
      display: block; 
     } 
    } 
} 

Answer 2

vous devez utiliser la position absolue pour le pied de page

header{ 
 
    background-color:yellow; 
 
    height: 50px; 
 
} 
 

 
footer{ 
 
    background-color:red; 
 
position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    overflow:hidden; 
 
}

<section> 
 
    <header>Header</header> 
 
    <div>CONTENT</div> 
 
    <footer>Footer</footer> 
 
</section>