我需要在带有页眉和页脚的文档中打印一些 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>
最佳答案
问题是你的位置是固定的，因为你把位置固定在底部，为了固定它，页脚会粘在那个位置的视口(viewport)上，你可以添加一个与页脚高度相同的边距底部。 . 作为例子
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>关于php - 打印带有页眉页脚内容的 html 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46830279/