Question

我需要在带有页眉和页脚的文档中打印一些php / posgresql结果。我的打印页面是PHP。直到这里，一切都很顺利，但问题是内容出现在页脚上。知道如何解决这个问题吗？

我的代码：

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

Answer 1

问题在于您的位置已固定，因为您将位置固定在底部，页脚将粘贴到该位置的视口以便修复它，您可以添加与页脚高度相同的边距底部。作为例子

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>

打印带页眉页脚内容的html页面

1 个答案: