ヘッダーフッターの内容を含むhtmlページを印刷

私はいくつかのphp/posgresql結果をヘッダーとフッターのある文書に出力する必要があります。私の印刷ページはPHPです。ここまでは問題なく動作しますが、コンテンツがフッターに表示されるという問題があります。この問題を解決するにはどうすればよいですか？ヘッダーフッターの内容を含むhtmlページを印刷

マイコード：

<!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>

出典

2017-10-19 Anonymous

問題は、あなたが下部に固定された位置を入れているので、フッタはそれを修正するために、その位置にビューポートに固執する固定あなたの位置であり、あなたが追加することができますあなたのフッターと同じ高さとマージン下..例として

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>

出典

2017-10-19 12:58:20

同じそれでも、動作していません... –

ヘッダーフッターの内容を含むhtmlページを印刷

答えて

関連する問題