Question

我在网页上有页眉和页脚问题正在打印。我的自定义页眉和页脚应在每页上打印。标题是在页面顶部打印，这很好，但如果页面上的内容较少，页脚不会在页面底部打印。页脚打印取决于内容。

这是我的代码： -

<html>
  <head>
    <meta name="generator" content=
    "HTML Tidy for Windows (vers 14 February 2006), see www.w3.org">
    <link rel='stylesheet' type='text/css' href='print.css' media='print'>
    <title></title>
  </head>
  <body>
    <table border="0" align="center" width="100%">
      <thead>
        <tr>
          <th align="center" width="100%">
            <font size="5" color="black"><strong>HEADER HERE</strong></font>
          </th>
        </tr>
      </thead>
      <tfoot>
        <tr>
          <td align="center" width="100%">
            <font size="4" color="black"><strong>FOOTER HERE</strong></font>
          </td>
        </tr>
      </tfoot>
      <tbody height="100%">
        <tr>
          <td width="100%">
            CONTENT HERE
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

我的CSS是： -

.thead {
display: table-header-group;
}

.tfoot {
display: table-footer-group;
}

任何人都可以建议我怎么做吗？那会有很大的帮助吗？

Answer 1

由于您有print.css，请写（仅限于print.css）：

thead {
    display: block;
    position: fixed;
    top: 0;
}

tfoot {
    display: block;
    position: fixed;
    bottom: 0;
}

根据thead和tfoot可能占用的高度，请在表格上使用适当的margin-top和margin-bottom，以避免可能发生的任何重叠。

Answer 2

这是我使用的代码。注意我将html和身高都设置为100％（Chrome和Safari需要）。测试并在IE9，FF，Chrome中正常工作。

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}

标题和页脚在打印页面？不是Web浏览器页眉和页脚

2 个答案: