imprimer la page html avec le contenu de la page d'en-tête

J'ai besoin d'imprimer des résultats php/posgresql dans un document avec en-tête et pied de page. Ma page d'impression est PHP. Jusqu'à ici, tout va bien, mais le problème est le contenu apparaît sur le pied de page. Une idée de comment résoudre ce problème?imprimer la page html avec le contenu de la page d'en-tête

Mon code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>PRINT PAGE</title> 
<style> 
html, body { height:100%; } 
@page { margin: 5px; } 
header { top:0; left:0; width:100%; height:15%; position:fixed; } 
footer { bottom:0; left:0; width:100%; height:5%; position:fixed; } 
</style> 
</head> 
<body> 
<header> 
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 
    <tr> 
    <td colspan="2" align="center" valign="middle" style="border-bottom:#036 solid 1px; padding-bottom:5px; padding-top:5px;">LOGO</td> 
    </tr> 
    <tr> 
    <td width="30%" align="center" valign="middle" style="border-bottom: #036 solid 1px; padding:5px;">HEADER</td>  
    </tr> 
</table> 
</header> 
<div style="position:relative; top:16%; bottom:6%; width:100%;"> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
<tbody> 
    <tr> 
    <td valign="top" style="font-family:Tahoma, Geneva, sans-serif; font-size:14px; text-align:justify"><?php echo $row_print['COL'];?></td> 
    </tr> 
</tbody> 
</table> 
</div> 
<footer> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
    <tr> 
    <td align="center" valign="middle" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; text-align:center; border-top:#036 solid 2px;">FOOTER</td> 
    </tr> 
</table> 
</footer> 
</body> 
</html>

Source

2017-10-19 Anonymous

Le problème est votre position fixe puisque vous mettez la position fixe au bas du pied de page collera à la fenêtre à cette position afin de le corriger, vous pouvez ajouter un marge inférieure à la même hauteur que votre pied .. comme l'exemple

html, body { height:100%; 
 
padding-bottom:10px; 
 
} 
 
@page { margin: 5px; } 
 
header { top:0; left:0; width:100%; height:15%; position:fixed; 
 
background:white; 
 
z-index:1;} 
 
footer { bottom:0; left:0; width:100%; height:5%; position:fixed; 
 
background:white;}

<header> 
 
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"> 
 
    <tr> 
 
    <td colspan="2" align="center" valign="middle" style="border-bottom:#036 solid 1px; padding-bottom:5px; padding-top:5px;">LOGO</td> 
 
    </tr> 
 
    <tr> 
 
    <td width="30%" align="center" valign="middle" style="border-bottom: #036 solid 1px; padding:5px;">HEADER</td>  
 
    </tr> 
 
</table> 
 
</header> 
 
<div style="position:relative; top:16%; bottom:6%; width:100%;margin-bottom:20px;"> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
<tbody> 
 
    <tr> 
 
    <td valign="top" style="font-family:Tahoma, Geneva, sans-serif; font-size:14px; text-align:justify">content</td> 
 
    </tr>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere pretium libero, non elementum velit tincidunt in. Phasellus est nisi, commodo eu leo sed, commodo convallis dui. Donec lobortis leo id aliquam finibus. Sed rhoncus odio a mi pharetra aliquam. Sed ac tristique ante. Morbi libero urna, sodales in porta sit amet, ultricies auctor mi. Nulla sollicitudin, turpis et cursus tincidunt, urna mi tincidunt eros, in maximus dui felis sit amet velit. Maecenas rutrum, velit a euismod pharetra, ligula sapien ullamcorper velit, a finibus ipsum risus id purus. Donec quis odio ac augue aliquam facilisis eget sit amet arcu. Nam faucibus vehicula posuere. Sed ante nibh, tincidunt ac nibh eu, tempor ornare risus. Vestibulum fermentum arcu ac odio viverra, non scelerisque sem congue. Fusce bibendum malesuada lacus eu faucibus. 
 

 
Vivamus efficitur efficitur quam, sed pulvinar velit porttitor sed. Etiam a magna et dui tincidunt iaculis. Suspendisse potenti. Vivamus ut feugiat quam. Nulla consequat justo in dolor auctor, ut auctor felis scelerisque. Donec interdum nisl sit amet enim varius, nec condimentum nibh fermentum. Phasellus egestas felis elit, in volutpat risus auctor ut. Integer ultrices enim sit amet enim elementum, ac semper est varius. Suspendisse eget nisi egestas, vestibulum metus nec, convallis nisi. Suspendisse id eros mauris. In tristique, tellus sed imperdiet feugiat, ante magna malesuada tellus, eget mollis tortor velit tincidunt tellus. Ut vehicula orci risus, vel placerat augue varius nec. Suspendisse eu molestie arcu. Duis consequat velit nisl, et hendrerit justo tempor a. Duis sed finibus magna. Aenean ac posuere diam. 
 
</tbody> 
 
</table> 
 
</div> 
 
<footer> 
 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr> 
 
    <td align="center" valign="middle" style="font-family:Tahoma, Geneva, sans-serif; font-size:12px; text-align:center; border-top:#036 solid 2px;">FOOTER</td> 
 
    </tr> 
 
</table> 
 
</footer> 
 
</body>

Source

2017-10-19 12:58:20

ne fonctionne pas, toujours le même ... –

imprimer la page html avec le contenu de la page d'en-tête

Répondre

Questions connexes