Question

我尝试了几种方法，但似乎都没有正常工作。我有一个HTML报告，我需要在每个页面中打印带有页眉和页脚的报告。我需要在firefox中使用它！

解决方案1：

<html>
<head>
<title></title>
<style type="text/css">
@media print {
#footer {
    display: block;
    position: fixed;
    bottom: 0;
}
}
</style>
</head>
<body>
<table border="0" width="100%" cellspacing="0" cellpadding="0">
  <thead>
    <tr>
      <th style="width:100%"> header content </th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td width="100%"><table width="100%" border="0">
          <tr>
            <td colspan="4"><br>
              &nbsp;</td>
          </tr>
        </table>
  </tfoot>
  <tbody>
    <tr>
      <td width="100%"> main content </td>
    </tr>
  </tbody>
</table>
<table id="footer" width="100%">
  <tr>
    <td width="100%"> footer content </td>
  </tr>
</table>
</body>
</html>

解决方案1问题：主要内容覆盖页脚。

解决方案2：

<html>
<head>
<title></title>
<style type="text/css">
@media print {
thead {
    display: table-header-group;
}
tfoot {
    display: table-footer-group;
}
}
@media screen {
thead {
    display: block;
}
tfoot {
    display: block;
}
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <td>header content</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> main content </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>footer content</td>
    </tr>
  </tfoot>
</table>
</body>
</html>

解决方案2问题：页脚停留在主要内容的正下方，并不总是如我所愿在页面底部。

任何帮助或其他解决方案？

由于

Answer 1

如果我理解你，请尝试：设置页脚高度为50px（100px，200px ......任何东西）并添加到主要内容margin-bottom：50px（页脚高度）

这必须使用页脚排除上覆内容。

Answer 2

好的，我找到了解决问题的方法。我会把它放在那些有同样问题的人身上。在我的第一个例子中，我们只需要为脚注分配我们想要的高度。

例如：

<tfoot>
   <tr> 
    <td width="100%"> 
     <table width="100%" border="0"> 
       <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr> 
      <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr> 
      <tr> 
         <td colspan="4">
         <br>&nbsp;
         </td> 
      </tr>
    </table> 
  </tfoot>

或指定一个班级并设置你想要的高度。

在所有页面上打印带有页眉和页脚的HTML报告 - Firefox

2 个答案: