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

【问题标题】：Print HTML report with header and footer on all pages - Firefox在所有页面上打印带有页眉和页脚的 HTML 报告 - Firefox
【发布时间】：2012-10-29 16:59:35
【问题描述】：

我尝试了几种方法，但似乎都没有正常工作。我有一个 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 问题：页脚位于主要内容的正下方，并不总是像我希望的那样位于页面底部。

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

谢谢

【问题讨论】：

试试：csslayoutgenerator.com
适用于网络，但对于打印我仍然有同样的问题。

标签： html css printing media-queries

【解决方案1】：

如果我理解正确，请尝试：将页脚高度设置为 50 像素（100 像素、200 像素……任何东西）并添加到主要内容 margin-bottom:50px （页脚高度）

这必须排除带有页脚的重叠内容。

【讨论】：

对不起，在这种情况下，对于带有位置固定页脚的打印，此方法不起作用..

【解决方案2】：

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

例如：

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

或者分配一个班级，然后放你想要的高度。

【讨论】：

您在示例中设置了宽度，但说您设置了高度..？你能详细说明一下解决方案吗？