页眉和页脚在打印页面中？不是Web浏览器的页眉和页脚

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

这是我使用的代码。 注意我将html和主体高度都设置为100％（Chrome和Safari需要）。 经过测试并在IE9，FF和Chrome中正常运行。

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

Answer 2

由于您具有print.css ，因此请写（仅在print.css ）：

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

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

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

页眉和页脚在打印页面中？不是Web浏览器的页眉和页脚

问题描述

2 个解决方案

解决方案1
-1 2012-08-15 05:22:30

解决方案2
-1 2012-02-23 14:11:05

页眉和页脚在打印页面中？ 不是Web浏览器的页眉和页脚

问题描述

2 个解决方案

解决方案1 -1 2012-08-15 05:22:30

解决方案2 -1 2012-02-23 14:11:05

页眉和页脚在打印页面中？不是Web浏览器的页眉和页脚

解决方案1
-1 2012-08-15 05:22:30

解决方案2
-1 2012-02-23 14:11:05