4

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

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

谢谢

4

2 回答 2

0

如果我理解正确，请尝试：将页脚高度设置为 50 像素（100 像素、200 像素......任何东西）并添加到主要内容边距底部：50 像素（页脚高度）

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

于 2012-11-12T12:28:21.387 回答
0

好的，我找到了解决问题的方法。我会把它放在这里给那些有同样问题的人。在我的第一个示例中，我们只需为 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>

或者分配一个班级并放置您想要的高度。

于 2012-11-12T17:04:06.097 回答