blocks|key|54415|text|这是您只想打印的内容吗？您可以将其添加到站点上的每个页面，并使用CSS将标记定义为仅打印媒体。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54416|例如，这可能是一个示例标头：|54417|<span+class="printspan">UNCLASSIFIED</span>|code-block|syntax|javascript|54418|在你的CSS中，这样做：|54419|<style+type="text/css"+media="screen">
++++.printspan
++++{
++++++++display:+none;
++++}
</style>
<style+type="text/css"+media="print">
++++.printspan
++++{
++++++++display:+inline;
++++++++font-family:+Arial,+sans-serif;
++++++++font-size:+16+pt;
++++++++color:+red;
++++}
</style>|54420|最后，为了在可能使用服务器端包含的每个页面上包含页眉/页脚，或者如果您有任何使用PHP或ASP生成的页面，您可以简单地将其编码到一个公共文件中。|54421|编辑：|offset|length|style|BOLD|54422|此答案旨在提供一种在文档的物理打印版本上显示某些内容，而不显示其他内容的方法。然而，正如评论所暗示的那样，它不能解决当内容溢出时在多个打印页面上有一个页脚的问题。|54423|我把它留在这里，以防它仍然有用。|54424|entityMap^0|0|0|0|0|0|0|0|3|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|11|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|13|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|14|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|15|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|16|8|@$Q|17|R|18|S|T]]|9|@]|A|$]]|$1|U|3|V|5|6|7|19|8|@]|9|@]|A|$]]|$1|W|3|X|5|6|7|1A|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1B|8|@]|9|@]|A|$]]]|Z|$]]

<p>Is this something you want to print-only? You could add it to every page on your site and use CSS to define the tag as a print-only media.</p>

<p>As an example, this could be an example header:</p>

<pre><code>&lt;span class="printspan"&gt;UNCLASSIFIED&lt;/span&gt;
</code></pre>

<p>And in your CSS, do something like this:</p>

<pre><code>&lt;style type="text/css" media="screen"&gt;
    .printspan
    {
        display: none;
    }
&lt;/style&gt;
&lt;style type="text/css" media="print"&gt;
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
&lt;/style&gt;
</code></pre>

<p>Finally, to include the header/footer on every page you might use server-side includes or if you have any pages being generated with PHP or ASP you could simply code it in to a common file.</p>

<p><strong>Edit:</strong></p>

<p>This answer is intended to provide a way to show something on the physical printed version of a document while not showing it otherwise. However just as comments suggest, it doesn't solve the issue of having a footer on multiple printed pages when content overflows.</p>

<p>I'm leaving it here in case it's helpful nevertheless.</p>


blocks|key|54426|text|如果您想要作为页脚的元素，并将其设置为position:fixed和bottom:0，当页面打印时，它将在每个打印页面的底部重复该元素。这同样适用于header元素，只需设置top:0即可。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54427|例如：|54428|<div+class="divFooter">UNCLASSIFIED</div>|code-block|syntax|javascript|54429|CSS：|54430|@media+screen+{
++div.divFooter+{
++++display:+none;
++}
}
@media+print+{
++div.divFooter+{
++++position:+fixed;
++++bottom:+0;
++}
}|54431|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>If you take the element that you want to be the footer and set it to be position:fixed and bottom:0, when the page prints it will repeat that element at the bottom of each printed page.  The same would work for a header element, just set top:0 instead.</p>

<p>For example:</p>

<pre><code>&lt;div class="divFooter"&gt;UNCLASSIFIED&lt;/div&gt;
</code></pre>

<p>CSS:</p>

<pre><code>@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}
</code></pre>


blocks|key|55426|text|我认为正确的答案是HTML5和CSS3不支持在print媒体中打印页眉和页脚。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|55427|虽然您可以使用以下命令来模拟它：|55428|55429|tables|unordered-list-item|55430|fixed+position阻止|55431|55432|它们各自都有缺陷，使得它们不能成为理想的通用解决方案。|55433|entityMap^0|N|5|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|-4|5|6|7|W|8|@]|D|@]|E|$]]|$1|I|3|J|5|K|7|X|8|@]|D|@]|E|$]]|$1|L|3|M|5|K|7|Y|8|@]|D|@]|E|$]]|$1|N|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]|$1|O|3|P|5|6|7|10|8|@]|D|@]|E|$]]|$1|Q|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|R|$]]

<p>I believe the correct answer is that HTML 5 and CSS3 have no support for printing page header and footers in <code>print</code> media.</p>

<p>And while you might be able to simulate it with: </p>

<ul>
<li>tables</li>
<li>fixed position blocks</li>
</ul>

<p>they each have bugs that prevent them from being the ideal general solution.</p>


blocks|key|54470|text|我试图结合tfoot和css规则来打这场徒劳无功的战斗，但它只在Firefox上有效:(。当使用纯css时，内容会流过页脚。使用tfoot时，最后一页的页脚不能很好地留在底部。这是因为表页脚适用于表，而不是物理页。在Chrome16、Opera11、Firefox3和6以及IE6上进行了测试。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54471|<!DOCTYPE+HTML+PUBLIC+"-//W3C//DTD+HTML+4.01//EN"+"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta+http-equiv="Content-Type"+content="text/html;+charset=iso-8859-1">
<title>Header+&+Footer+test</title>

<style>

++@media+screen+{
++++div#footer_wrapper+{
++++++display:+none;
++++}
++}

++@media+print+{
++++tfoot+{+visibility:+hidden;+}

++++div#footer_wrapper+{
++++++margin:+0px+2px+0px+7px;
++++++position:+fixed;
++++++bottom:+0;
++++}

++++div#footer_content+{
++++++font-weight:+bold;
++++}
++}

</style>
</head>

<body>

<div+id="footer_wrapper">
++<div+id="footer_content">
++++Total+4923
++</div>
</div>


<TABLE+CELLPADDING=6>

<THEAD>
<TR>+<TH>Weekday</TH>+<TH>Date</TH>+<TH>Manager</TH>+<TH>Qty</TH>+</TR>
</THEAD>

<TBODY>
<TR>+<TD>Mon</TD>+<TD>09/11</TD>+<TD>Kelsey</TD>++<TD>639</TD>++</TR>
<TR>+<TD>Tue</TD>+<TD>09/12</TD>+<TD>Lindsey</TD>+<TD>596</TD>++</TR>
<TR>+<TD>Wed</TD>+<TD>09/13</TD>+<TD>Randy</TD>+++<TD>1135</TD>+</TR>
<TR>+<TD>Thu</TD>+<TD>09/14</TD>+<TD>Susan</TD>+++<TD>1002</TD>+</TR>
<TR>+<TD>Fri</TD>+<TD>09/15</TD>+<TD>Randy</TD>+++<TD>908</TD>++</TR>
<TR>+<TD>Sat</TD>+<TD>09/16</TD>+<TD>Lindsey</TD>+<TD>371</TD>++</TR>
<TR>+<TD>Sun</TD>+<TD>09/17</TD>+<TD>Susan</TD>+++<TD>272</TD>++</TR>
<TR>+<TD>Mon</TD>+<TD>09/11</TD>+<TD>Kelsey</TD>++<TD>639</TD>++</TR>
<TR>+<TD>Tue</TD>+<TD>09/12</TD>+<TD>Lindsey</TD>+<TD>596</TD>++</TR>
<TR>+<TD>Wed</TD>+<TD>09/13</TD>+<TD>Randy</TD>+++<TD>1135</TD>+</TR>
<TR>+<TD>Thu</TD>+<TD>09/14</TD>+<TD>Susan</TD>+++<TD>1002</TD>+</TR>
<TR>+<TD>Fri</TD>+<TD>09/15</TD>+<TD>Randy</TD>+++<TD>908</TD>++</TR>
<TR>+<TD>Sat</TD>+<TD>09/16</TD>+<TD>Lindsey</TD>+<TD>371</TD>++</TR>
<TR>+<TD>Sun</TD>+<TD>09/17</TD>+<TD>Susan</TD>+++<TD>272</TD>++</TR>
<TR>+<TD>Mon</TD>+<TD>09/11</TD>+<TD>Kelsey</TD>++<TD>639</TD>++</TR>
<TR>+<TD>Tue</TD>+<TD>09/12</TD>+<TD>Lindsey</TD>+<TD>596</TD>++</TR>
<TR>+<TD>Wed</TD>+<TD>09/13</TD>+<TD>Randy</TD>+++<TD>1135</TD>+</TR>
<TR>+<TD>Thu</TD>+<TD>09/14</TD>+<TD>Susan</TD>+++<TD>1002</TD>+</TR>
<TR>+<TD>Fri</TD>+<TD>09/15</TD>+<TD>Randy</TD>+++<TD>908</TD>++</TR>
<TR>+<TD>Sat</TD>+<TD>09/16</TD>+<TD>Lindsey</TD>+<TD>371</TD>++</TR>
<TR>+<TD>Sun</TD>+<TD>09/17</TD>+<TD>Susan</TD>+++<TD>272</TD>++</TR>
<TR>+<TD>Mon</TD>+<TD>09/11</TD>+<TD>Kelsey</TD>++<TD>639</TD>++</TR>
<TR>+<TD>Tue</TD>+<TD>09/12</TD>+<TD>Lindsey</TD>+<TD>596</TD>++</TR>
<TR>+<TD>Wed</TD>+<TD>09/13</TD>+<TD>Randy</TD>+++<TD>1135</TD>+</TR>
<TR>+<TD>Thu</TD>+<TD>09/14</TD>+<TD>Susan</TD>+++<TD>1002</TD>+</TR>
<TR>+<TD>Fri</TD>+<TD>09/15</TD>+<TD>Randy</TD>+++<TD>908</TD>++</TR>
<TR>+<TD>Sat</TD>+<TD>09/16</TD>+<TD>Lindsey</TD>+<TD>371</TD>++</TR>
<TR>+<TD>Sun</TD>+<TD>09/17</TD>+<TD>Susan</TD>+++<TD>272</TD>++</TR>
<TR>+<TD>Mon</TD>+<TD>09/11</TD>+<TD>Kelsey</TD>++<TD>639</TD>++</TR>
<TR>+<TD>Tue</TD>+<TD>09/12</TD>+<TD>Lindsey</TD>+<TD>596</TD>++</TR>
<TR>+<TD>Wed</TD>+<TD>09/13</TD>+<TD>Randy</TD>+++<TD>1135</TD>+</TR>
<TR>+<TD>Thu</TD>+<TD>09/14</TD>+<TD>Susan</TD>+++<TD>1002</TD>+</TR>
<TR>+<TD>Fri</TD>+<TD>09/15</TD>+<TD>Randy</TD>+++<TD>908</TD>++</TR>
<TR>+<TD>Sat</TD>+<TD>09/16</TD>+<TD>Lindsey</TD>+<TD>371</TD>++</TR>
<TR>+<TD>Sun</TD>+<TD>09/17</TD>+<TD>Susan</TD>+++<TD>272</TD>++</TR>
<TR>+<TD>Mon</TD>+<TD>09/11</TD>+<TD>Kelsey</TD>++<TD>639</TD>++</TR>
<TR>+<TD>Tue</TD>+<TD>09/12</TD>+<TD>Lindsey</TD>+<TD>596</TD>++</TR>
<TR>+<TD>Wed</TD>+<TD>09/13</TD>+<TD>Randy</TD>+++<TD>1135</TD>+</TR>
<TR>+<TD>Thu</TD>+<TD>09/14</TD>+<TD>Susan</TD>+++<TD>1002</TD>+</TR>
<TR>+<TD>Fri</TD>+<TD>09/15</TD>+<TD>Randy</TD>+++<TD>908</TD>++</TR>
<TR>+<TD>Sat</TD>+<TD>09/16</TD>+<TD>Lindsey</TD>+<TD>371</TD>++</TR>
<TR>+<TD>Sun</TD>+<TD>09/17</TD>+<TD>Susan</TD>+++<TD>272</TD>++</TR>
<TR>+<TD>Mon</TD>+<TD>09/11</TD>+<TD>Kelsey</TD>++<TD>639</TD>++</TR>
<TR>+<TD>Tue</TD>+<TD>09/12</TD>+<TD>Lindsey</TD>+<TD>596</TD>++</TR>
<TR>+<TD>Wed</TD>+<TD>09/13</TD>+<TD>Randy</TD>+++<TD>1135</TD>+</TR>
<TR>+<TD>Thu</TD>+<TD>09/14</TD>+<TD>Susan</TD>+++<TD>1002</TD>+</TR>
<TR>+<TD>Fri</TD>+<TD>09/15</TD>+<TD>Randy</TD>+++<TD>908</TD>++</TR>
<TR>+<TD>Sat</TD>+<TD>09/16</TD>+<TD>Lindsey</TD>+<TD>371</TD>++</TR>
<TR>+<TD>Sun</TD>+<TD>09/17</TD>+<TD>Susan</TD>+++<TD>272</TD>++</TR>
</TBODY>

<TFOOT+id="table_footer">
<TR>+<TH+ALIGN=LEFT+COLSPAN=3>Total</TH>+<TH>4923</TH>+</TR>
</TFOOT>

</TABLE>

</body>
</html>|code-block|syntax|javascript|54472|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I tried to fight this futile battle combining tfoot &amp; css rules but it only worked on Firefox :(. When using plain css, the content flows over the footer. When using tfoot, the footer on the last page does not stay nicely on the bottom. This is because table footers are meant for tables, not physical pages. Tested on Chrome 16, Opera 11, Firefox 3 &amp; 6 and IE6.</p>

<pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
&lt;title&gt;Header &amp; Footer test&lt;/title&gt;

&lt;style&gt;

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

&lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;

&lt;div id="footer_wrapper"&gt;
  &lt;div id="footer_content"&gt;
    Total 4923
  &lt;/div&gt;
&lt;/div&gt;


&lt;TABLE CELLPADDING=6&gt;

&lt;THEAD&gt;
&lt;TR&gt; &lt;TH&gt;Weekday&lt;/TH&gt; &lt;TH&gt;Date&lt;/TH&gt; &lt;TH&gt;Manager&lt;/TH&gt; &lt;TH&gt;Qty&lt;/TH&gt; &lt;/TR&gt;
&lt;/THEAD&gt;

&lt;TBODY&gt;
&lt;TR&gt; &lt;TD&gt;Mon&lt;/TD&gt; &lt;TD&gt;09/11&lt;/TD&gt; &lt;TD&gt;Kelsey&lt;/TD&gt;  &lt;TD&gt;639&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Tue&lt;/TD&gt; &lt;TD&gt;09/12&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;596&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Wed&lt;/TD&gt; &lt;TD&gt;09/13&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;1135&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Thu&lt;/TD&gt; &lt;TD&gt;09/14&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;1002&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Fri&lt;/TD&gt; &lt;TD&gt;09/15&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;908&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sat&lt;/TD&gt; &lt;TD&gt;09/16&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;371&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sun&lt;/TD&gt; &lt;TD&gt;09/17&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;272&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Mon&lt;/TD&gt; &lt;TD&gt;09/11&lt;/TD&gt; &lt;TD&gt;Kelsey&lt;/TD&gt;  &lt;TD&gt;639&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Tue&lt;/TD&gt; &lt;TD&gt;09/12&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;596&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Wed&lt;/TD&gt; &lt;TD&gt;09/13&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;1135&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Thu&lt;/TD&gt; &lt;TD&gt;09/14&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;1002&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Fri&lt;/TD&gt; &lt;TD&gt;09/15&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;908&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sat&lt;/TD&gt; &lt;TD&gt;09/16&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;371&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sun&lt;/TD&gt; &lt;TD&gt;09/17&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;272&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Mon&lt;/TD&gt; &lt;TD&gt;09/11&lt;/TD&gt; &lt;TD&gt;Kelsey&lt;/TD&gt;  &lt;TD&gt;639&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Tue&lt;/TD&gt; &lt;TD&gt;09/12&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;596&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Wed&lt;/TD&gt; &lt;TD&gt;09/13&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;1135&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Thu&lt;/TD&gt; &lt;TD&gt;09/14&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;1002&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Fri&lt;/TD&gt; &lt;TD&gt;09/15&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;908&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sat&lt;/TD&gt; &lt;TD&gt;09/16&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;371&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sun&lt;/TD&gt; &lt;TD&gt;09/17&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;272&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Mon&lt;/TD&gt; &lt;TD&gt;09/11&lt;/TD&gt; &lt;TD&gt;Kelsey&lt;/TD&gt;  &lt;TD&gt;639&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Tue&lt;/TD&gt; &lt;TD&gt;09/12&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;596&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Wed&lt;/TD&gt; &lt;TD&gt;09/13&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;1135&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Thu&lt;/TD&gt; &lt;TD&gt;09/14&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;1002&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Fri&lt;/TD&gt; &lt;TD&gt;09/15&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;908&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sat&lt;/TD&gt; &lt;TD&gt;09/16&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;371&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sun&lt;/TD&gt; &lt;TD&gt;09/17&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;272&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Mon&lt;/TD&gt; &lt;TD&gt;09/11&lt;/TD&gt; &lt;TD&gt;Kelsey&lt;/TD&gt;  &lt;TD&gt;639&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Tue&lt;/TD&gt; &lt;TD&gt;09/12&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;596&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Wed&lt;/TD&gt; &lt;TD&gt;09/13&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;1135&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Thu&lt;/TD&gt; &lt;TD&gt;09/14&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;1002&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Fri&lt;/TD&gt; &lt;TD&gt;09/15&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;908&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sat&lt;/TD&gt; &lt;TD&gt;09/16&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;371&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sun&lt;/TD&gt; &lt;TD&gt;09/17&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;272&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Mon&lt;/TD&gt; &lt;TD&gt;09/11&lt;/TD&gt; &lt;TD&gt;Kelsey&lt;/TD&gt;  &lt;TD&gt;639&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Tue&lt;/TD&gt; &lt;TD&gt;09/12&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;596&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Wed&lt;/TD&gt; &lt;TD&gt;09/13&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;1135&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Thu&lt;/TD&gt; &lt;TD&gt;09/14&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;1002&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Fri&lt;/TD&gt; &lt;TD&gt;09/15&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;908&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sat&lt;/TD&gt; &lt;TD&gt;09/16&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;371&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sun&lt;/TD&gt; &lt;TD&gt;09/17&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;272&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Mon&lt;/TD&gt; &lt;TD&gt;09/11&lt;/TD&gt; &lt;TD&gt;Kelsey&lt;/TD&gt;  &lt;TD&gt;639&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Tue&lt;/TD&gt; &lt;TD&gt;09/12&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;596&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Wed&lt;/TD&gt; &lt;TD&gt;09/13&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;1135&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Thu&lt;/TD&gt; &lt;TD&gt;09/14&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;1002&lt;/TD&gt; &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Fri&lt;/TD&gt; &lt;TD&gt;09/15&lt;/TD&gt; &lt;TD&gt;Randy&lt;/TD&gt;   &lt;TD&gt;908&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sat&lt;/TD&gt; &lt;TD&gt;09/16&lt;/TD&gt; &lt;TD&gt;Lindsey&lt;/TD&gt; &lt;TD&gt;371&lt;/TD&gt;  &lt;/TR&gt;
&lt;TR&gt; &lt;TD&gt;Sun&lt;/TD&gt; &lt;TD&gt;09/17&lt;/TD&gt; &lt;TD&gt;Susan&lt;/TD&gt;   &lt;TD&gt;272&lt;/TD&gt;  &lt;/TR&gt;
&lt;/TBODY&gt;

&lt;TFOOT id="table_footer"&gt;
&lt;TR&gt; &lt;TH ALIGN=LEFT COLSPAN=3&gt;Total&lt;/TH&gt; &lt;TH&gt;4923&lt;/TH&gt; &lt;/TR&gt;
&lt;/TFOOT&gt;

&lt;/TABLE&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|2751690|text|使用page+breaks定义CSS中的样式：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2751691|@media+all
++{
++#page-one,+.footer,+.page-break+{+display:none;+}
++}

@media+print
++{
++#page-one,+.footer,+.page-break+++
++++{+
++++display:+block;
++++color:red;+
++++font-family:Arial;+
++++font-size:+16px;+
++++text-transform:+uppercase;+
++++}
++.page-break
++++{
++++page-break-before:always;
++++}+
}|code-block|syntax|javascript|2751692|然后在文档中的适当位置添加标记：|2751693|<h2+id="page-one">unclassified</h2>

<h2+class="footer">unclassified</h2>
<h2+class="page-break">unclassified</h2>

<h2+class="footer">unclassified</h2>
<h2+class="page-break">unclassified</h2>

<h2+class="footer">unclassified</h2>
<h2+class="page-break">unclassified</h2>

<h2+class="footer">unclassified</h2>
<h2+class="page-break">unclassified</h2>|2751694|参考|style|BOLD|2751695|2751696|CSS+Paged+Media:+Page+Breaks|unordered-list-item|2751697|MDN:+page-break-before|2751698|MDN:+break-before|2751699|Multi-column+Layout|2751700|XHTML+Print:+Second+Edition|2751701|Webkit+Bug+5097:+CSS2+page-break-after+does+not+work|2751702|Print+HTML+FAQ:+Will+the+program+respect+CSS+styles+such+as+page-break-after?|2751703|How+to+deal+with+page+breaks+when+printing+a+large+HTML+table|2751704|2751705|entityMap|0|LINK|mutability|MUTABLE|url|https://msdn.microsoft.com/en-us/library/ie/ms533037#setting_page_breaks_|1|http://www.w3.org/TR/css3-page/#page-breaks|2|https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before|3|https://developer.mozilla.org/en-US/docs/Web/CSS/break-before|4|https://msdn.microsoft.com/en-us/library/ie/hh673534|5|https://www.w3.org/TR/xhtml-print/|6|https://bugs.webkit.org/show_bug.cgi?id=5097|7|http://www.printhtml.com/faq.php#CSS|8|https://stackoverflow.com/questions/1763639/1113772^0|2|B|0|0|0|0|0|0|2|0|0|0|S|1|0|0|M|2|0|0|H|3|0|0|J|4|0|0|R|5|0|0|1G|6|0|0|25|7|0|0|1P|8|0|0^^$0|@$1|2|3|4|5|6|7|1X|8|@]|9|@$A|1Y|B|1Z|1|20]]|C|$]]|$1|D|3|E|5|F|7|21|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|22|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|23|8|@]|9|@]|C|$G|H]]|$1|M|3|N|5|6|7|24|8|@$A|25|B|26|O|P]]|9|@]|C|$]]|$1|Q|3|-4|5|6|7|27|8|@]|9|@]|C|$]]|$1|R|3|S|5|T|7|28|8|@]|9|@$A|29|B|2A|1|2B]]|C|$]]|$1|U|3|V|5|T|7|2C|8|@]|9|@$A|2D|B|2E|1|2F]]|C|$]]|$1|W|3|X|5|T|7|2G|8|@]|9|@$A|2H|B|2I|1|2J]]|C|$]]|$1|Y|3|Z|5|T|7|2K|8|@]|9|@$A|2L|B|2M|1|2N]]|C|$]]|$1|10|3|11|5|T|7|2O|8|@]|9|@$A|2P|B|2Q|1|2R]]|C|$]]|$1|12|3|13|5|T|7|2S|8|@]|9|@$A|2T|B|2U|1|2V]]|C|$]]|$1|14|3|15|5|T|7|2W|8|@]|9|@$A|2X|B|2Y|1|2Z]]|C|$]]|$1|16|3|17|5|T|7|30|8|@]|9|@$A|31|B|32|1|33]]|C|$]]|$1|18|3|-4|5|6|7|34|8|@]|9|@]|C|$]]|$1|19|3|-4|5|6|7|35|8|@]|9|@]|C|$]]]|1A|$1B|$5|1C|1D|1E|C|$1F|1G]]|1H|$5|1C|1D|1E|C|$1F|1I]]|1J|$5|1C|1D|1E|C|$1F|1K]]|1L|$5|1C|1D|1E|C|$1F|1M]]|1N|$5|1C|1D|1E|C|$1F|1O]]|1P|$5|1C|1D|1E|C|$1F|1Q]]|1R|$5|1C|1D|1E|C|$1F|1S]]|1T|$5|1C|1D|1E|C|$1F|1U]]|1V|$5|1C|1D|1E|C|$1F|1W]]]]

<p>Use <a href="https://msdn.microsoft.com/en-us/library/ie/ms533037#setting_page_breaks_" rel="nofollow noreferrer">page breaks</a> to define the styles in CSS:</p>

<pre><code>@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}
</code></pre>

<p>Then add the markup in the document at the appropriate places:</p>

<pre><code>&lt;h2 id="page-one"&gt;unclassified&lt;/h2&gt;
&lt;!-- content block --&gt;
&lt;h2 class="footer"&gt;unclassified&lt;/h2&gt;
&lt;h2 class="page-break"&gt;unclassified&lt;/h2&gt;
&lt;!-- content block --&gt;
&lt;h2 class="footer"&gt;unclassified&lt;/h2&gt;
&lt;h2 class="page-break"&gt;unclassified&lt;/h2&gt;
&lt;!-- content block --&gt;
&lt;h2 class="footer"&gt;unclassified&lt;/h2&gt;
&lt;h2 class="page-break"&gt;unclassified&lt;/h2&gt;
&lt;!-- content block --&gt;
&lt;h2 class="footer"&gt;unclassified&lt;/h2&gt;
&lt;h2 class="page-break"&gt;unclassified&lt;/h2&gt;
</code></pre>

<p><strong>References</strong></p>

<ul>
<li><p><a href="http://www.w3.org/TR/css3-page/#page-breaks" rel="nofollow noreferrer">CSS Paged Media: Page Breaks</a></p></li>
<li><p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before" rel="nofollow noreferrer">MDN: page-break-before</a></p></li>
<li><p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/break-before" rel="nofollow noreferrer">MDN: break-before</a></p></li>
<li><p><a href="https://msdn.microsoft.com/en-us/library/ie/hh673534" rel="nofollow noreferrer">Multi-column Layout</a></p></li>
<li><p><a href="https://www.w3.org/TR/xhtml-print/" rel="nofollow noreferrer">XHTML Print: Second Edition</a></p></li>
<li><p><a href="https://bugs.webkit.org/show_bug.cgi?id=5097" rel="nofollow noreferrer">Webkit Bug 5097: CSS2 page-break-after does not work</a></p></li>
<li><p><a href="http://www.printhtml.com/faq.php#CSS" rel="nofollow noreferrer">Print HTML FAQ: Will the program respect CSS styles such as page-break-after?</a></p></li>
<li><p><a href="https://stackoverflow.com/questions/1763639/1113772">How to deal with page breaks when printing a large HTML table</a></p></li>
</ul>


blocks|key|2540672|text|从this+question+--将以下样式添加到仅打印样式表中。此解决方案将在IE和火狐中工作，但not+in+Chrome+(从版本21开始)：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2540673|#header+{
++display:+table-header-group;
}

#main+{
++display:+table-row-group;
}

#footer+{
++display:+table-footer-group;
}|code-block|syntax|javascript|2540674|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/q/8356881/901048|1|http://code.google.com/p/chromium/issues/detail?id=24826^0|1|D|0|1E|D|1|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]|$A|W|B|X|1|Y]]|C|$]]|$1|D|3|E|5|F|7|Z|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|10|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]|Q|$5|L|M|N|C|$O|R]]]]

<p>From <a href="https://stackoverflow.com/q/8356881/901048">this question</a> -- add the following styles to a print-only stylesheet. This solution will work in IE and Firefox, but <a href="http://code.google.com/p/chromium/issues/detail?id=24826" rel="nofollow noreferrer">not in Chrome</a> (as of version 21):</p>

<pre><code>#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}
</code></pre>


blocks|key|55473|text|如果您可以使用javascipt，请让客户端使用javascript处理内容布局，以基于可用空间放置元素。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55474|您可以使用jquery列化器插件在固定大小的块中动态布局您的内容，并将页眉和页脚定位为呈现例程的一部分。http://welcome.totheinter.net/columnizer-jquery-plugin/|offset|length|55475|请参见示例10+http://welcome.totheinter.net/autocolumn/sample10.html|55476|如果在os中启用，则浏览器仍将添加其自己的头部或脚注。跨平台和跨浏览器的一致布局可能需要有条件的css。|55477|entityMap|0|LINK|mutability|MUTABLE|url|http://welcome.totheinter.net/columnizer-jquery-plugin/|1|http://welcome.totheinter.net/autocolumn/sample10.html^0|0|1G|1J|0|0|8|1I|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|U|8|@]|9|@$D|V|E|W|1|X]]|A|$]]|$1|F|3|G|5|6|7|Y|8|@]|9|@$D|Z|E|10|1|11]]|A|$]]|$1|H|3|I|5|6|7|12|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]|R|$5|M|N|O|A|$P|S]]]]

<p>If you can use javascipt, have the client handle laying out the content using javascript to place elements based on available space.</p>

<p>You could use the jquery columnizer plugin to dynamically lay out your content in fixed size blocks and position your headers and footers as part of the rendering routine.
<a href="http://welcome.totheinter.net/columnizer-jquery-plugin/" rel="nofollow noreferrer">http://welcome.totheinter.net/columnizer-jquery-plugin/</a></p>

<p>See example 10
<a href="http://welcome.totheinter.net/autocolumn/sample10.html" rel="nofollow noreferrer">http://welcome.totheinter.net/autocolumn/sample10.html</a></p>

<p>The browser will still add its own headers or footers if enabled in the os. Consistent layout across platforms and browsers will likely require conditional css.</p>


blocks|key|2751762|text|我多年来一直在寻找解决方案，并在how+to+print+a+footer+that+works+on+multiple+pages+without+overlapping+page+content.上找到了这篇文章|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2751763|我的要求是IE8，到目前为止，我发现这在Chrome中不起作用。从2018年3月1日起，更新了，它也可以在Chrome上运行|style|BOLD|2751764|此示例通过设置css样式使用表和tfoot元素：|2751765|tfoot+{display:+table-footer-group;}|code-block|syntax|javascript|2751766|entityMap|0|LINK|mutability|MUTABLE|url|http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size^0|G|2C|0|0|18|3|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@$A|11|B|12|F|G]]|9|@]|C|$]]|$1|H|3|I|5|6|7|13|8|@]|9|@]|C|$]]|$1|J|3|K|5|L|7|14|8|@]|9|@]|C|$M|N]]|$1|O|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|P|$Q|$5|R|S|T|C|$U|V]]]]

<p>I have been searching for years for a solution and found this post on <a href="http://www.codeproject.com/Questions/247645/Print-html-table-into-A4-size" rel="noreferrer">how to print a footer that works on multiple pages without overlapping page content.</a></p>

<p>My requirement was IE8, so far I have found that this does not work in Chrome. [<strong>update</strong>]As of 1 March 2018, it works in Chrome as well</p>

<p>This example uses tables and the tfoot element by setting the css style: </p>

<pre><code>tfoot {display: table-footer-group;}
</code></pre>


blocks|key|55812|text|如果你使用的是像Asp.net+Razor+engine或Angular这样的模板引擎，我认为你必须重新生成你的页面，将页面分成几个页面，然后你可以自由地标记每个页面，并将页眉和页脚放在主题上。下面是一个例子：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55813|​|55814|@page+{
++size:+A4;++
+++margin:+.9cm;
}


@media+print+{

+++body.print-paper-a4+{
++++width:+210mm;
++++height:+297mm;
++}

+++body+{
+++++++background:+white;
+++++++margin:+0;
+++++++padding:+0;
+++}

+++.print-stage,
+++.no-print+{
+++++++display:+none;
+++}


+++body.print-paper.a4+.print-paper+{
++++++width:+210mm;
++++++++height:+297mm;
++++}

+++.print-paper+{
+++++++page-break-after:+always;
+++++++margin:+0;
+++++++padding:+.8cm;
+++++++border:none;
+++++++overflow:+hidden;
+++}

}





.print-papers+{
++++display:+block;
++++z-index:+2000;
++++margin:+auto;

}


body.print-paper-a4+.print-paper+{
++++width:+21cm;
++++height:27cm;
}


.print-paper+{
++++margin:+auto;
++++background:+white;
++++border:+1px+dotted+black;
++++box-sizing:+border-box;
++++margin:+1cm+auto;
++++padding:+.8cm;
+++++++overflow:+hidden;+++
}


body.print-mode+.no-print-preview+{
++++display:+none;
}

body.print-mode+.print-preview+{
++++display:+block;
}|code-block|syntax|javascript|55815|<body+class="print-mode+print-paper-a4">
++++++++
++++++++<div+class="print-papers+print-preview">
++++++++++++<div+class="print-paper">
++++++++++++++++<div+style="font-size:+5cm">
++++++++++++++++++++HELLO
++++++++++++++++</div>

++++++++++++</div>
++++++++++++<div+class="print-paper">
++++++++++++++<div+class="page-header">
++++++++++++++++</div>
++++++++++++++
++++++++++++++
++++++++++++</div>
++++++++++++<div+class="print-paper">
++++++++++++++++
++++++++++++++++

++++++++++++</div>++++++++++++
++++++++</div>
++</body>|55816|55817|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|K|3|C|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>If you are using a template engine like Asp.net Razor Engine or Angular, 
I think you must re-generate your page and split the page in several pages and then you can freely markup each page and put header and footer on theme.
 one example could be as bellow:</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@page {
  size: A4;  
   margin: .9cm;
}


@media print {

   body.print-paper-a4 {
    width: 210mm;
    height: 297mm;
  }

   body {
       background: white;
       margin: 0;
       padding: 0;
   }

   .print-stage,
   .no-print {
       display: none;
   }


   body.print-paper.a4 .print-paper {
      width: 210mm;
        height: 297mm;
    }

   .print-paper {
       page-break-after: always;
       margin: 0;
       padding: .8cm;
       border:none;
       overflow: hidden;
   }

}





.print-papers {
    display: block;
    z-index: 2000;
    margin: auto;

}


body.print-paper-a4 .print-paper {
    width: 21cm;
    height:27cm;
}


.print-paper {
    margin: auto;
    background: white;
    border: 1px dotted black;
    box-sizing: border-box;
    margin: 1cm auto;
    padding: .8cm;
       overflow: hidden;   
}


body.print-mode .no-print-preview {
    display: none;
}

body.print-mode .print-preview {
    display: block;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;body class="print-mode print-paper-a4"&gt;
        
        &lt;div class="print-papers print-preview"&gt;
            &lt;div class="print-paper"&gt;
                &lt;div style="font-size: 5cm"&gt;
                    HELLO
                &lt;/div&gt;

            &lt;/div&gt;
            &lt;div class="print-paper"&gt;
              &lt;div class="page-header"&gt;
                &lt;/div&gt;
              
              
            &lt;/div&gt;
            &lt;div class="print-paper"&gt;
                
                

            &lt;/div&gt;            
        &lt;/div&gt;
  &lt;/body&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2540745|text|我花了大半天的时间想出了一个对我有效的解决方案，并认为我应该分享我所做的事情。上面的解决方案的问题是，我的所有段落元素都会与页面底部的页脚重叠。为了解决这个问题，我使用了以下CSS：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2540746|footer+{
++font-size:+9px;
++color:+#f00;
++text-align:+center;
}

@page+{
++size:+A4;
++margin:+11mm+17mm+17mm+17mm;
}

@media+print+{
++footer+{
++++position:+fixed;
++++bottom:+0;
++}

++.content-block,+p+{
++++page-break-inside:+avoid;
++}

++html,+body+{
++++width:+210mm;
++++height:+297mm;
++}
}|code-block|syntax|javascript|2540747|p和content-block的page-break-inside对我来说至关重要。每当我在h*后面有一个p时，我都会将它们都包装在一个div+class+=+"content-block">中，以确保它们保持在一起并且不会中断。|offset|length|style|CODE|2540748|我希望有人会觉得这很有用，因为我花了大约3个小时才弄明白(我也是CSS/HTML的新手，所以……)|2540749|编辑|2540750|根据注释中的请求，我添加了一个示例HTML文档。您需要将其复制到HTML文件中，打开该文件，然后选择打印该页面。打印预览应显示此功能正在运行。在我这一端，它在Firefox和IE上都能用，但Chrome把字体做得足够小，可以放在一个页面上，所以在那里就不能用了。|2540751|​|2540752|footer+{
++font-size:+9px;
++color:+#f00;
++text-align:+center;
}

@page+{
++size:+A4;
++margin:+11mm+17mm+17mm+17mm;
}

@media+print+{
++footer+{
++++position:+fixed;
++++bottom:+0;
++}

++.content-block,+p+{
++++page-break-inside:+avoid;
++}

++html,+body+{
++++width:+210mm;
++++height:+297mm;
++}
}|2540753|<!DOCTYPE+html>
<html>
++<head></head>
++<body>
++++<h1>
++++++Example+Document
++++</h1>
++++<div>
++++++<p>
++++++++This+is+an+example+document+that+shows+how+to+have+a+footer+that+repeats+at+the+bottom+of+every+page,+but+also+isn't+covered+up+by+paragraph+text.
++++++</p>
++++</div>
++++<div>
++++++<h3>
++++++++Example+Section+I
++++++</h3>
++++++<p>
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Pellentesque+vitae+augue+sed+purus+dictum+ultricies+at+eu+neque.+Nullam+ut+mauris+a+purus+tristique+euismod.+Sed+elementum,+leo+id+placerat+congue,+leo+tellus+pharetra+orci,+eget+ultricies+odio+quam+sit+amet+ipsum.+Praesent+feugiat,+lorem+at+commodo+egestas,+felis+ligula+pharetra+sapien,+in+placerat+mauris+nisi+aliquet+tortor.+Quisque+nibh+lectus,+laoreet+vel+mollis+a,+tincidunt+vel+ipsum.+Sed+blandit+vehicula+sollicitudin.+Donec+et+sapien+justo.+Ut+fermentum+ipsum+imperdiet+diam+condimentum,+eget+varius+sapien+dictum.+Sed+sed+elit+egestas+libero+maximus+finibus+eu+eget+massa.
++++++++
++++++++Duis+finibus+vestibulum+finibus.+Nunc+lobortis+lacus+ut+libero+mattis+tempor.+Nulla+a+nunc+at+nisl+elementum+congue.+Nunc+eu+consectetur+mauris.+Etiam+non+placerat+massa.+Etiam+eu+urna+in+metus+tempus+molestie+sed+eget+diam.+Nunc+sem+velit,+elementum+sit+amet+fringilla+in,+dictum+sit+amet+sem.+Quisque+convallis+faucibus+purus+dignissim+dictum.+Sed+semper,+mi+vel+accumsan+sollicitudin,+massa+massa+pellentesque+justo,+eget+auctor+sapien+enim+ac+elit.
++++++++
++++++++Nullam+turpis+augue,+lacinia+ut+libero+ac,+rhoncus+bibendum+ligula.+Mauris+ullamcorper+maximus+turpis,+a+consequat+turpis+bibendum+sit+amet.+Nam+vitae+dui+nec+velit+hendrerit+faucibus.+Vivamus+nunc+diam,+porta+tristique+augue+nec,+dignissim+venenatis+felis.+Proin+mattis+id+risus+in+feugiat.+Etiam+cursus+faucibus+nisi.+In+in+nisi+ullamcorper,+convallis+lectus+et,+ornare+nulla.+Cras+tristique+nulla+eros,+non+maximus+odio+imperdiet+eu.+Nullam+egestas+dignissim+est,+et+fringilla+odio+pretium+eleifend.+Nullam+tincidunt+sapien+fermentum,+rhoncus+risus+ac,+ullamcorper+libero.+Vestibulum+bibendum+molestie+dui+nec+tincidunt.+Mauris+tempus,+orci+ut+congue+vulputate,+erat+orci+aliquam+orci,+sed+eleifend+orci+dui+sed+tellus.+Pellentesque+pellentesque+massa+vulputate+urna+pretium,+consectetur+pulvinar+orci+pulvinar.
++++++++
++++++++Donec+aliquet+imperdiet+ex,+et+tincidunt+risus+convallis+eget.+Etiam+eu+fermentum+lectus,+molestie+eleifend+nisi.+Orci+varius+natoque+penatibus+et+magnis+dis+parturient+montes,+nascetur+ridiculus+mus.+Nullam+dignissim,+erat+vitae+congue+molestie,+ante+urna+sagittis+est,+et+sagittis+lacus+risus+vitae+est.+Sed+elementum+ipsum+et+pellentesque+dignissim.+Sed+vehicula+feugiat+pretium.+Donec+ex+lacus,+dictum+faucibus+lectus+sit+amet,+tempus+hendrerit+ante.+Ut+sollicitudin+sodales+metus,+at+placerat+risus+viverra+ut.
++++++++
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Duis+finibus+vestibulum+finibus.+Nunc+lobortis+lacus+ut+libero+mattis+tempor.+Nulla+a+nunc+at+nisl+elementum+congue.+Nunc+eu+consectetur+mauris.+Etiam+non+placerat+massa.+Etiam+eu+urna+in+metus+tempus+molestie+sed+eget+diam.+Nunc+sem+velit,+elementum+sit+amet+fringilla+in,+dictum+sit+amet+sem.+Quisque+convallis+faucibus+purus+dignissim+dictum.+Sed+semper,+mi+vel+accumsan+sollicitudin,+massa+massa+pellentesque+justo,+eget+auctor+sapien+enim+ac+elit.
++++++++
++++++++Nullam+turpis+augue,+lacinia+ut+libero+ac,+rhoncus+bibendum+ligula.+Mauris+ullamcorper+maximus+turpis,+a+consequat+turpis+bibendum+sit+amet.+Nam+vitae+dui+nec+velit+hendrerit+faucibus.+Vivamus+nunc+diam,+porta+tristique+augue+nec,+dignissim+venenatis+felis.+Proin+mattis+id+risus+in+feugiat.+Etiam+cursus+faucibus+nisi.+In+in+nisi+ullamcorper,+convallis+lectus+et,+ornare+nulla.+Cras+tristique+nulla+eros,+non+maximus+odio+imperdiet+eu.+Nullam+egestas+dignissim+est,+et+fringilla+odio+pretium+eleifend.+Nullam+tincidunt+sapien+fermentum,+rhoncus+risus+ac,+ullamcorper+libero.
++++++</p>
++++</div>
++++<div+class="content-block">
++++++<h3>Example+Section+II</h3>
++++++<p>
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Pellentesque+vitae+augue+sed+purus+dictum+ultricies+at+eu+neque.+Nullam+ut+mauris+a+purus+tristique+euismod.+Sed+elementum,+leo+id+placerat+congue,+leo+tellus+pharetra+orci,+eget+ultricies+odio+quam+sit+amet+ipsum.+Praesent+feugiat,+lorem+at+commodo+egestas,+felis+ligula+pharetra+sapien,+in+placerat+mauris+nisi+aliquet+tortor.+Quisque+nibh+lectus,+laoreet+vel+mollis+a,+tincidunt+vel+ipsum.+Sed+blandit+vehicula+sollicitudin.+Donec+et+sapien+justo.+Ut+fermentum+ipsum+imperdiet+diam+condimentum,+eget+varius+sapien+dictum.+Sed+sed+elit+egestas+libero+maximus+finibus+eu+eget+massa.
++++++</p>
++++</div>
++++<footer>
++++++This+is+the+text+that+goes+at+the+bottom+of+every+page.
++++</footer>
++</body>
</html>|2540754|2540755|entityMap^0|0|0|0|1|2|D|G|H|1A|2|1H|1|1W|S|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@$I|14|J|15|K|L]|$I|16|J|17|K|L]|$I|18|J|19|K|L]|$I|1A|J|1B|K|L]|$I|1C|J|1D|K|L]|$I|1E|J|1F|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|1G|8|@]|9|@]|A|$]]|$1|O|3|P|5|6|7|1H|8|@]|9|@]|A|$]]|$1|Q|3|R|5|6|7|1I|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|1J|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1K|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|D|7|1L|8|@]|9|@]|A|$E|F]]|$1|Y|3|T|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Z|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|10|$]]

<p>I just spent the better half of my day coming up with a solution that actually worked for me and thought I would share what I did. The problem with the solutions above that I was having was that all of my paragraph elements would overlap with the footer I wanted at the bottom of the page. In order to get around this, I used the following CSS:</p>

<pre class="lang-css prettyprint-override"><code>footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}
</code></pre>

<p>The <code>page-break-inside</code> for <code>p</code> and <code>content-block</code> was crucial for me. Any time I have a <code>p</code> following an <code>h*</code>, I wrap them both in a <code>div class = "content-block"&gt;</code> to ensure they stay together and don't break. </p>

<p>I'm hoping that someone finds this useful because it took me about 3 hours to figure out (I'm also new to CSS/HTML, so there's that...)</p>

<h2>EDIT</h2>

<p>Per a request in the comments, I am adding an example HTML document. You'll want to copy this into an HTML file, open it, and then choose to print the page. The print preview should show this working. It worked in Firefox and IE on my end, but Chrome made the font small enough to fit on one page, so it didn't work there. </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;
      Example Document
    &lt;/h1&gt;
    &lt;div&gt;
      &lt;p&gt;
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;h3&gt;
        Example Section I
      &lt;/h3&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="content-block"&gt;
      &lt;h3&gt;Example Section II&lt;/h3&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      This is the text that goes at the bottom of every page.
    &lt;/footer&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2751825|text|一种只适用于向每个页面添加标题的方法是将内容包装在<table>中，然后将标题内容放入<thead>标记中，将内容放入<tbody>标记中，如下所示：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2751826|<table>
++<thead>
++++<tr>
++++++<th>This+content+appears+on+every+page</th>
++++</tr>
+++</thead>
+++<tbody>
+++++<tr>
+++++++<td>Put+all+your+content+here,+it+can+span+multiple+pages+and+your+header+will+show+up+at+the+top+of+each+page</td>
+++++</tr>
+++</tbody>
+</table>|code-block|syntax|javascript|2751827|这在Chrome中是有效的，但在其他浏览器上不是100%25确定。|2751828|entityMap^0|P|7|17|7|1N|7|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|V|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|W|8|@]|D|@]|E|$]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>One approach that only works for adding headers to every page is to wrap your content in a <code>&lt;table&gt;</code> and then put your header content in a <code>&lt;thead&gt;</code> tag and your content in a <code>&lt;tbody&gt;</code> tag, like so:</p>

<pre><code>&lt;table&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;This content appears on every page&lt;/th&gt;
    &lt;/tr&gt;
   &lt;/thead&gt;
   &lt;tbody&gt;
     &lt;tr&gt;
       &lt;td&gt;Put all your content here, it can span multiple pages and your header will show up at the top of each page&lt;/td&gt;
     &lt;/tr&gt;
   &lt;/tbody&gt;
 &lt;/table&gt;
</code></pre>

<p>This works in Chrome, not 100% sure about other browsers.</p>


blocks|key|55838|text|根据一些帖子，我认为position:+fixed适合我。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|55839|​|55840|body+{
++background:+#eaeaed;
++-webkit-print-color-adjust:+exact;
}

.my-footer+{
++background:+#2db34a;
++bottom:+0;
++left:+0;
++position:+fixed;
++right:+0;
}

.my-header+{
++background:+red;
++top:+0;
++left:+0;
++position:+fixed;
++right:+0;
}|code-block|syntax|javascript|55841|<html>

<head>
++<meta+charset=utf-8+/>
++<title>Header+&+Footer</title>

</head>

<body>
++<div>
++++<div+class="my-header">Fixed+Header</div>
++++<div+class="my-footer">Fixed+Footer</div>
++++<table>
++++++<thead>
++++++++<tr>
++++++++++<th>TH+1</th>
++++++++++<th>TH+2</th>
++++++++</tr>
++++++</thead>
++++++<tbody>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++++<tr>
++++++++++<td>TD+1</td>
++++++++++<td>TD+2</td>
++++++++</tr>
++++++</tbody>
++++</table>
++</div>
</body>

</html>|55842|55843|在chrome中按Ctrl%2BP可以查看每一页的页眉和页脚文本。希望能有所帮助|55844|entityMap^0|A|F|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|W|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|X|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|Y|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|Z|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|10|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|11|8|@]|D|@]|E|$]]]|S|$]]

blocks|key|2751900|text|神奇的解决方案是把所有的东西都放在一张表中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2751901|2751902|thead：这是用于重复标题的。|unordered-list-item|offset|length|style|BOLD|2751903|2751904|2751905|tfoot：重复页脚。|2751906|2751907|2751908|tbody：内容。|2751909|2751910|并创建一个tr，td，并将所有内容放在div中|2751911|代码：：|2751912|<table+class="report-container">
+++<thead+class="report-header">
+++++<tr>
++++++++<th+class="report-header-cell">
+++++++++++<div+class="header-info">
++++++++++++...
+++++++++++</div>
+++++++++</th>
++++++</tr>
++++</thead>
++++<tfoot+class="report-footer">
++++++<tr>
+++++++++<td+class="report-footer-cell">
+++++++++++<div+class="footer-info">
+++++++++++...
+++++++++++</div>
++++++++++</td>
++++++</tr>
++++</tfoot>
++++<tbody+class="report-content">
++++++<tr>
+++++++++<td+class="report-content-cell">
++++++++++++<div+class="main">
++++++++++++...
++++++++++++</div>
++++++++++</td>
+++++++</tr>
+++++</tbody>
</table>|code-block|syntax|javascript|2751913|2751914|table.report-container+{
++++page-break-after:always;
}
thead.report-header+{
++++display:table-header-group;
}
tfoot.report-footer+{
++++display:table-footer-group;
}+|2751915|2751916|extra：防止多个页面重叠。像这样：|2751917|<div+class="main">
++++<div+class="article">
++++++++...
++</div>
++++<div+class="article">
++++++++...
++</div>
++++<div+class="article">
++++++++...
++</div>
++...
++...
++...
</div>|2751918|这会导致溢出，使内容与分页符内的页眉重叠。|2751919|因此，>>将：page-break-inside:+avoid+!important;与article类一起使用。|CODE|2751920|table.report-container+div.article+{
++++page-break-inside:+avoid;
}|2751921|2751922|很简单，希望这能给你带来你所希望的最好的结果。|2751923|诚挚的问候。;)|2751924|entityMap^0|0|0|0|5|0|0|0|0|5|0|0|0|0|5|0|0|0|0|2|0|0|0|0|0|0|5|0|0|0|7|10|18|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|1N|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]|$1|C|3|D|5|E|7|1P|8|@$F|1Q|G|1R|H|I]]|9|@]|A|$]]|$1|J|3|-4|5|6|7|1S|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|1T|8|@]|9|@]|A|$]]|$1|L|3|M|5|E|7|1U|8|@$F|1V|G|1W|H|I]]|9|@]|A|$]]|$1|N|3|-4|5|6|7|1X|8|@]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]|$1|P|3|Q|5|E|7|1Z|8|@$F|20|G|21|H|I]]|9|@]|A|$]]|$1|R|3|-4|5|6|7|22|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|23|8|@]|9|@]|A|$]]|$1|U|3|V|5|6|7|24|8|@$F|25|G|26|H|I]]|9|@]|A|$]]|$1|W|3|X|5|Y|7|27|8|@]|9|@]|A|$Z|10]]|$1|11|3|-4|5|6|7|28|8|@]|9|@]|A|$]]|$1|12|3|13|5|Y|7|29|8|@]|9|@]|A|$Z|10]]|$1|14|3|-4|5|6|7|2A|8|@]|9|@]|A|$]]|$1|15|3|16|5|6|7|2B|8|@$F|2C|G|2D|H|I]]|9|@]|A|$]]|$1|17|3|18|5|Y|7|2E|8|@]|9|@]|A|$Z|10]]|$1|19|3|1A|5|6|7|2F|8|@]|9|@]|A|$]]|$1|1B|3|1C|5|6|7|2G|8|@$F|2H|G|2I|H|1D]|$F|2J|G|2K|H|1D]]|9|@]|A|$]]|$1|1E|3|1F|5|Y|7|2L|8|@]|9|@]|A|$Z|10]]|$1|1G|3|-4|5|6|7|2M|8|@]|9|@]|A|$]]|$1|1H|3|1I|5|6|7|2N|8|@]|9|@]|A|$]]|$1|1J|3|1K|5|6|7|2O|8|@]|9|@]|A|$]]|$1|1L|3|-4|5|6|7|2P|8|@]|9|@]|A|$]]]|1M|$]]

<p>the magic solution is really putting every thing in single table.</p>
<ul>
<li><p><strong>thead</strong>: this is for the repeated header.</p>
</li>
<li><p><strong>tfoot</strong>: the repeated footer.</p>
</li>
<li><p><strong>tbody</strong>: the content.</p>
</li>
</ul>
<p>and make a single tr, td and put every thing in a div</p>
<p><strong><em>CODE</em></strong>::</p>
<pre class="lang-html prettyprint-override"><code>&lt;table class=&quot;report-container&quot;&gt;
   &lt;thead class=&quot;report-header&quot;&gt;
     &lt;tr&gt;
        &lt;th class=&quot;report-header-cell&quot;&gt;
           &lt;div class=&quot;header-info&quot;&gt;
            ...
           &lt;/div&gt;
         &lt;/th&gt;
      &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tfoot class=&quot;report-footer&quot;&gt;
      &lt;tr&gt;
         &lt;td class=&quot;report-footer-cell&quot;&gt;
           &lt;div class=&quot;footer-info&quot;&gt;
           ...
           &lt;/div&gt;
          &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tfoot&gt;
    &lt;tbody class=&quot;report-content&quot;&gt;
      &lt;tr&gt;
         &lt;td class=&quot;report-content-cell&quot;&gt;
            &lt;div class=&quot;main&quot;&gt;
            ...
            &lt;/div&gt;
          &lt;/td&gt;
       &lt;/tr&gt;
     &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>
<hr />
<pre class="lang-css prettyprint-override"><code>table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
} 
</code></pre>
<hr />
<h3><strong>extra</strong>: to prevent overlapping with multiple pages. like:</h3>
<pre class="lang-html prettyprint-override"><code>&lt;div class=&quot;main&quot;&gt;
    &lt;div class=&quot;article&quot;&gt;
        ...
  &lt;/div&gt;
    &lt;div class=&quot;article&quot;&gt;
        ...
  &lt;/div&gt;
    &lt;div class=&quot;article&quot;&gt;
        ...
  &lt;/div&gt;
  ...
  ...
  ...
&lt;/div&gt;
</code></pre>
<p>which results in overflow that will make things overlap with the header within the page breaks..</p>
<p>so &gt;&gt; use: <code>page-break-inside: avoid !important;</code> with this class <code>article</code>.</p>
<pre class="lang-css prettyprint-override"><code>table.report-container div.article {
    page-break-inside: avoid;
}
</code></pre>
<hr />
<p>pretty simple, hope this will give you the best result you wishing for.</p>
<p>best regards. ;)</p>


blocks|key|55543|text|我找到了一个解决方案。其基本思想是制作一个表格，在标题部分将标题数据放在tr中，并通过css强制显示tr只在打印中显示，而不是在屏幕上显示，那么您正常的标题应该强制只在屏幕上显示而不是在打印中。100%25工作在多页打印。示例代码在这里|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55544|<style>+
++++@media+screen+{
++++++++.only_print{
++++++++++++display:none;
++++++++}
++++}
++++@media+print+{
++++++++.no-print+{
++++++++++++display:+none+!important;
++++++++}
++++}
++++TABLE{border-collapse:+collapse;}
++++TH,+TD+{border:1px+solid+grey;}
</style>
<div+class="no-print">++
++++<div>COMPANY+NAME+FOR+SCREEN</div>
++++<div>DESCRIPTION+FOR+SCREEN</div>
</div>

<table>
++++<thead>
++++++++<tr+class="only_print">+
++++++++++++<td+colspan="100"+style="border:+0px;">
++++++++++++++++<div>COMPANY+NAME+FOR+PRINT</div>
++++++++++++++++<div>DESCRIPTION+FOR+PRINT</div>
++++++++++++</td>
++++++++</tr>
++++++++
++++++++<tr>
++++++++++++<th>Column+1</th>
++++++++++++<th>Column+2</th>
++++++++++++<th>Column+3</th>
++++++++</tr>
++++</thead>
++++<tbody>
++++++++<tr>
++++++++++++<td>1-1</td>
++++++++++++<td>1-2</td>
++++++++++++<td>1-3</td>
++++++++</tr>
++++++++<tr>
++++++++++++<td>2-1</td>
++++++++++++<td>2-2</td>
++++++++++++<td>2-3</td>
++++++++</tr>
++++</tbody>
</table>|code-block|syntax|javascript|55545|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I found one solution. The basic idea is to make a table and in thead section place the data of header in tr and by css force to show that tr only in print not in screen then your normal header should be force to show only in screen not in print. 100% working on many pages print. sample code is here</p>

<pre><code>&lt;style&gt; 
    @media screen {
        .only_print{
            display:none;
        }
    }
    @media print {
        .no-print {
            display: none !important;
        }
    }
    TABLE{border-collapse: collapse;}
    TH, TD {border:1px solid grey;}
&lt;/style&gt;
&lt;div class="no-print"&gt;  &lt;!-- This is header for screen and will not be printed --&gt;
    &lt;div&gt;COMPANY NAME FOR SCREEN&lt;/div&gt;
    &lt;div&gt;DESCRIPTION FOR SCREEN&lt;/div&gt;
&lt;/div&gt;

&lt;table&gt;
    &lt;thead&gt;
        &lt;tr class="only_print"&gt; &lt;!-- This is header for print and will not be shown on screen --&gt;
            &lt;td colspan="100" style="border: 0px;"&gt;
                &lt;div&gt;COMPANY NAME FOR PRINT&lt;/div&gt;
                &lt;div&gt;DESCRIPTION FOR PRINT&lt;/div&gt;
            &lt;/td&gt;
        &lt;/tr&gt;
        &lt;!-- From here Actual Data of table start --&gt;
        &lt;tr&gt;
            &lt;th&gt;Column 1&lt;/th&gt;
            &lt;th&gt;Column 2&lt;/th&gt;
            &lt;th&gt;Column 3&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;1-1&lt;/td&gt;
            &lt;td&gt;1-2&lt;/td&gt;
            &lt;td&gt;1-3&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td&gt;2-1&lt;/td&gt;
            &lt;td&gt;2-2&lt;/td&gt;
            &lt;td&gt;2-3&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>


blocks|key|2753488|text|试试这个，对我来说，它可以在Chrome，Firefox和Safari上运行。您将获得页眉和页脚固定到每个页面，而不会重叠页面内容|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2753489|CSS|offset|length|style|BOLD|2753490|<style>
++@page+{
++++margin:+10mm;
++}

++body+{
++++font:+9pt+sans-serif;
++++line-height:+1.3;

++++/*+Avoid+fixed+header+and+footer+to+overlap+page+content+*/
++++margin-top:+100px;
++++margin-bottom:+50px;
++}

++#header+{
++++position:+fixed;
++++top:+0;
++++width:+100%25;
++++height:+100px;
++++/*+For+testing+*/
++++background:+yellow;+
++++opacity:+0.5;
++}

++#footer+{
++++position:+fixed;
++++bottom:+0;
++++width:+100%25;
++++height:+50px;
++++font-size:+6pt;
++++color:+#777;
++++/*+For+testing+*/
++++background:+red;+
++++opacity:+0.5;
++}

++/*+Print+progressive+page+numbers+*/
++.page-number:before+{
++++/*+counter-increment:+page;+*/
++++content:+"Pagina+"+counter(page);
++}

</style>|code-block|syntax|javascript|2753491|HTML|2753492|<body>

++<header+id="header">Header</header>

++<footer+id="footer">footer</footer>

++<div+id="content">
++++Here+your+long+long+content...
++++<p+style="page-break-inside:+avoid;">This+text+will+not+be+broken+between+the+pages</p>
++</div>

</body>|2753493|entityMap^0|0|0|3|0|0|0|4|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@$D|U|E|V|F|G]]|9|@]|A|$]]|$1|H|3|I|5|J|7|W|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|X|8|@$D|Y|E|Z|F|G]]|9|@]|A|$]]|$1|O|3|P|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|Q|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|R|$]]

<p>Try this, for me it's working on Chrome, Firefox and Safari. You will get header and footer fixed to each page without overlapping the page content</p>

<p><strong>CSS</strong></p>

<pre><code>&lt;style&gt;
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Pagina " counter(page);
  }

&lt;/style&gt;
</code></pre>

<p><strong>HTML</strong></p>

<pre><code>&lt;body&gt;

  &lt;header id="header"&gt;Header&lt;/header&gt;

  &lt;footer id="footer"&gt;footer&lt;/footer&gt;

  &lt;div id="content"&gt;
    Here your long long content...
    &lt;p style="page-break-inside: avoid;"&gt;This text will not be broken between the pages&lt;/p&gt;
  &lt;/div&gt;

&lt;/body&gt;
</code></pre>


blocks|key|2542097|text|我对Chrome有如此糟糕的CSS打印支持感到惊讶和不以为然。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2542098|我的任务需要在每个页面上显示一个略有不同的页脚。在最简单的情况下，只是递增的章节和页码。在更复杂的情况下，更多的文本在页脚中-例如，几个脚注-这可能会扩大它的大小，导致该页面内容区域上的内容缩小，部分内容重排到下一页。|2542099|CSS打印不能解决这个问题，至少不能解决目前对粗制滥造的浏览器的支持。但除了打印之外，CSS3可以做很多繁重的工作：|2542100|https://jsfiddle.net/b9chris/moctxd2a/29/|offset|length|2542101|<div+class=page>
++<header></header>
++<div+class=content>Content</div>
++<footer></footer>
</div>|code-block|syntax|javascript|2542102|SCSS：|2542103|body+{
++@media+screen+{
++++width:+7.5in;
++++margin:+0+auto;
++}
}

div.page+{
++display:+flex;
++height:+10in;++++
++flex-flow:+column+nowrap;
++justify-content:+space-between;
++align-content:+stretch;
}

div.content+{
++flex-grow:+1;
}

@media+print+{
++@page+{
++++size:+letter;++//+US+8.5in+x+11in
++++margin:+.5in;
++}

++footer+{
++++page-break-after:+always;
++}
}|2542104|示例中有更多的代码，包括一些Cat+Ipsum；但使用的js只是为了演示在不破坏分页的情况下页眉/页脚可以有多大的变化。关键是从CSS+Flexbox中获取一个粘贴列底部的技巧，然后将其应用到一个已知的固定高度的页面上-在这个例子中，是一张8.5"x11“的美国信纸大小的纸，.5”页边距“完全保留了width:+7.5in和height:+10in。一旦CSS+flex容器被告知了它的确切尺寸(div.page)，就很容易让页眉和页脚像传统排版那样扩展和收缩。|style|CODE|2542105|例如，当页脚增长到8个脚注而不是3个时，剩下的就是页面的内容。在我的例子中，内容是固定的，我不需要担心它，但我相信有一种方法可以做到这一点。脑海中浮现的一种方法是将页眉和页脚转换为100%25宽度的浮点数，然后用Javascript定位它们。浏览器将自动为您处理常规内容流的中断。|2542106|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|0|15|0|0|0|0|0|46|C|4J|C|5J|8|0|0^^$0|@$1|2|3|4|5|6|7|15|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|16|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|17|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|18|8|@]|9|@$H|19|I|1A|1|1B]]|A|$]]|$1|J|3|K|5|L|7|1C|8|@]|9|@]|A|$M|N]]|$1|O|3|P|5|6|7|1D|8|@]|9|@]|A|$]]|$1|Q|3|R|5|L|7|1E|8|@]|9|@]|A|$M|N]]|$1|S|3|T|5|6|7|1F|8|@$H|1G|I|1H|U|V]|$H|1I|I|1J|U|V]|$H|1K|I|1L|U|V]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1M|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1N|8|@]|9|@]|A|$]]]|Z|$10|$5|11|12|13|A|$14|G]]]]

<p>I'm surprised and unimpressed that Chrome has such terrible CSS print support.</p>

<p>My task required showing a slightly different footer on each page. In the simplest case, just an incrementing chapter and page number. In more complex cases, more text in the footer - for example, several footnotes - which could expand it in size, causing what is on that page's content area to be shrunk and part of it to reflow to the next page.</p>

<p>CSS print cannot solve this, at least not with shoddy browser support today. But stepping outside of print, CSS3 can do a lot of the heavy lifting:</p>

<p><a href="https://jsfiddle.net/b9chris/moctxd2a/29/" rel="nofollow noreferrer">https://jsfiddle.net/b9chris/moctxd2a/29/</a></p>

<pre><code>&lt;div class=page&gt;
  &lt;header&gt;&lt;/header&gt;
  &lt;div class=content&gt;Content&lt;/div&gt;
  &lt;footer&gt;&lt;/footer&gt;
&lt;/div&gt;
</code></pre>

<p>SCSS:</p>

<pre><code>body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}
</code></pre>

<p>There's a little more code in the example, including some Cat Ipsum; but the js in use is just there to demonstrate how much the header/footer can vary without breaking pagination. The key really is to take a column-bottom-sticking trick from CSS Flexbox and then apply it to a page of a known, fixed height - in this case, an 8.5"x11" piece of US letter-sized paper, with .5" margins leaving <code>width: 7.5in</code> and <code>height: 10in</code> exactly. Once the CSS flex container is told its exact dimensions (<code>div.page</code>), it's easy to get the header and footer to expand and contract the way they do in conventional typography.</p>

<p>What's left is flowing the content of the page when the footer, for example, grows to 8 footnotes not 3. In my case the content is fixed enough that I don't need to worry about it, but I'm sure there's a way to do it. One approach that leaps to mind, is to turn the header and footer into 100% width floats, then position them with Javascript. The browser will handle the interruptions to regular content flow for you automatically.</p>


blocks|key|2542168|text|@Daniel在2012年对缺乏对CSS3功能：top-center+&+bottom-center的支持的问题发表了评论。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2542169|好吧，在Chrome+73%2B中，下面的代码片段是有效的，其中header和footer是在页面中定义的<header></header>和<footer></footer>元素。|2542170|@page+{
++++@top-center+{+content:+element(header)+}
}
@page+{+
++++@bottom-center+{+content:+element(footer)+}
}|code-block|syntax|javascript|2542171|entityMap^0|0|7|O|A|11|D|0|U|6|11|6|1F|H|1X|H|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]|$9|10|A|11|B|C]|$9|12|A|13|B|C]]|D|@]|E|$]]|$1|H|3|I|5|J|7|14|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|15|8|@]|D|@]|E|$]]]|N|$]]

<p><code>@Daniel</code> made a comment on the question in 2012 about the lack of support for the CSS3 features: <code>top-center</code> &amp; <code>bottom-center</code>.</p>
<p>Well, In Chrome 73+, the following snippet works, where <code>header</code> and <code>footer</code> are <code>&lt;header&gt;&lt;/header&gt;</code> and <code>&lt;footer&gt;&lt;/footer&gt;</code> elements defined within the page.</p>
<pre><code>@page {
    @top-center { content: element(header) }
}
@page { 
    @bottom-center { content: element(footer) }
}
</code></pre>


blocks|key|55034|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|55035|footer+{
++font-size:+9px;
++color:+#f00;
++text-align:+center;
}
header+{
++font-size:+9px;
++color:+#f00;
++text-align:+center;
}

@page+{
++size:+A4;
++margin:+11mm+17mm+17mm+17mm;
}

@media+print+{
++footer+{
++++position:+fixed;
++++bottom:+0;
++}
+++header+{
++++position:+fixed;
++++top:+0;
++++overflow:+avoid;
++}

++.content-block,+p+{
++++page-break-inside:+avoid;
++++position:+relative;
++++width:+100%25;
++++top:1em;+++//match+size+of+header
++++left:0px;
++++right:0px;
++}

++html,+body+{
++++width:+210mm;
++++height:+297mm;
++}
++.hidden-print{
++display:+none;
}|code-block|syntax|javascript|55036|<!DOCTYPE+html>
<html>
++<head></head>
++<body>
++<button+class="hidden-print"+onClick="window.print()">Print</button>
++<header>unclassified<br><br></header>
++++<h1>
++++++Example+Document
++++</h1>
++++<div>
++++++<p>
++++++++This+is+an+example+document+that+shows+how+to+have+a+footer+that+repeats+at+the+bottom+of+every+page,+but+also+isn't+covered+up+by+paragraph+text.
++++++</p>
++++</div>
++++<div>
++++++<h3>
++++++++Example+Section+I
++++++</h3>
++++++<p>
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Pellentesque+vitae+augue+sed+purus+dictum+ultricies+at+eu+neque.+Nullam+ut+mauris+a+purus+tristique+euismod.+Sed+elementum,+leo+id+placerat+congue,+leo+tellus+pharetra+orci,+eget+ultricies+odio+quam+sit+amet+ipsum.+Praesent+feugiat,+lorem+at+commodo+egestas,+felis+ligula+pharetra+sapien,+in+placerat+mauris+nisi+aliquet+tortor.+Quisque+nibh+lectus,+laoreet+vel+mollis+a,+tincidunt+vel+ipsum.+Sed+blandit+vehicula+sollicitudin.+Donec+et+sapien+justo.+Ut+fermentum+ipsum+imperdiet+diam+condimentum,+eget+varius+sapien+dictum.+Sed+sed+elit+egestas+libero+maximus+finibus+eu+eget+massa.
++++++++
++++++++Duis+finibus+vestibulum+finibus.+Nunc+lobortis+lacus+ut+libero+mattis+tempor.+Nulla+a+nunc+at+nisl+elementum+congue.+Nunc+eu+consectetur+mauris.+Etiam+non+placerat+massa.+Etiam+eu+urna+in+metus+tempus+molestie+sed+eget+diam.+Nunc+sem+velit,+elementum+sit+amet+fringilla+in,+dictum+sit+amet+sem.+Quisque+convallis+faucibus+purus+dignissim+dictum.+Sed+semper,+mi+vel+accumsan+sollicitudin,+massa+massa+pellentesque+justo,+eget+auctor+sapien+enim+ac+elit.
++++++++
++++++++Nullam+turpis+augue,+lacinia+ut+libero+ac,+rhoncus+bibendum+ligula.+Mauris+ullamcorper+maximus+turpis,+a+consequat+turpis+bibendum+sit+amet.+Nam+vitae+dui+nec+velit+hendrerit+faucibus.+Vivamus+nunc+diam,+porta+tristique+augue+nec,+dignissim+venenatis+felis.+Proin+mattis+id+risus+in+feugiat.+Etiam+cursus+faucibus+nisi.+In+in+nisi+ullamcorper,+convallis+lectus+et,+ornare+nulla.+Cras+tristique+nulla+eros,+non+maximus+odio+imperdiet+eu.+Nullam+egestas+dignissim+est,+et+fringilla+odio+pretium+eleifend.+Nullam+tincidunt+sapien+fermentum,+rhoncus+risus+ac,+ullamcorper+libero.+Vestibulum+bibendum+molestie+dui+nec+tincidunt.+Mauris+tempus,+orci+ut+congue+vulputate,+erat+orci+aliquam+orci,+sed+eleifend+orci+dui+sed+tellus.+Pellentesque+pellentesque+massa+vulputate+urna+pretium,+consectetur+pulvinar+orci+pulvinar.
++++++++
++++++++Donec+aliquet+imperdiet+ex,+et+tincidunt+risus+convallis+eget.+Etiam+eu+fermentum+lectus,+molestie+eleifend+nisi.+Orci+varius+natoque+penatibus+et+magnis+dis+parturient+montes,+nascetur+ridiculus+mus.+Nullam+dignissim,+erat+vitae+congue+molestie,+ante+urna+sagittis+est,+et+sagittis+lacus+risus+vitae+est.+Sed+elementum+ipsum+et+pellentesque+dignissim.+Sed+vehicula+feugiat+pretium.+Donec+ex+lacus,+dictum+faucibus+lectus+sit+amet,+tempus+hendrerit+ante.+Ut+sollicitudin+sodales+metus,+at+placerat+risus+viverra+ut.
++++++++
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Duis+finibus+vestibulum+finibus.+Nunc+lobortis+lacus+ut+libero+mattis+tempor.+Nulla+a+nunc+at+nisl+elementum+congue.+Nunc+eu+consectetur+mauris.+Etiam+non+placerat+massa.+Etiam+eu+urna+in+metus+tempus+molestie+sed+eget+diam.+Nunc+sem+velit,+elementum+sit+amet+fringilla+in,+dictum+sit+amet+sem.+Quisque+convallis+faucibus+purus+dignissim+dictum.+Sed+semper,+mi+vel+accumsan+sollicitudin,+massa+massa+pellentesque+justo,+eget+auctor+sapien+enim+ac+elit.
++++++++
++++++++Nullam+turpis+augue,+lacinia+ut+libero+ac,+rhoncus+bibendum+ligula.+Mauris+ullamcorper+maximus+turpis,+a+consequat+turpis+bibendum+sit+amet.+Nam+vitae+dui+nec+velit+hendrerit+faucibus.+Vivamus+nunc+diam,+porta+tristique+augue+nec,+dignissim+venenatis+felis.+Proin+mattis+id+risus+in+feugiat.+Etiam+cursus+faucibus+nisi.+In+in+nisi+ullamcorper,+convallis+lectus+et,+ornare+nulla.+Cras+tristique+nulla+eros,+non+maximus+odio+imperdiet+eu.+Nullam+egestas+dignissim+est,+et+fringilla+odio+pretium+eleifend.+Nullam+tincidunt+sapien+fermentum,+rhoncus+risus+ac,+ullamcorper+libero.
++++++</p>
++++</div>
++++<div+class="content-block">
++++++<h3>Example+Section+II</h3>
++++++<p>
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Pellentesque+vitae+augue+sed+purus+dictum+ultricies+at+eu+neque.+Nullam+ut+mauris+a+purus+tristique+euismod.+Sed+elementum,+leo+id+placerat+congue,+leo+tellus+pharetra+orci,+eget+ultricies+odio+quam+sit+amet+ipsum.+Praesent+feugiat,+lorem+at+commodo+egestas,+felis+ligula+pharetra+sapien,+in+placerat+mauris+nisi+aliquet+tortor.+Quisque+nibh+lectus,+laoreet+vel+mollis+a,+tincidunt+vel+ipsum.+Sed+blandit+vehicula+sollicitudin.+Donec+et+sapien+justo.+Ut+fermentum+ipsum+imperdiet+diam+condimentum,+eget+varius+sapien+dictum.+Sed+sed+elit+egestas+libero+maximus+finibus+eu+eget+massa.
++++++</p>
++++++<p>
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Pellentesque+vitae+augue+sed+purus+dictum+ultricies+at+eu+neque.+Nullam+ut+mauris+a+purus+tristique+euismod.+Sed+elementum,+leo+id+placerat+congue,+leo+tellus+pharetra+orci,+eget+ultricies+odio+quam+sit+amet+ipsum.+Praesent+feugiat,+lorem+at+commodo+egestas,+felis+ligula+pharetra+sapien,+in+placerat+mauris+nisi+aliquet+tortor.+Quisque+nibh+lectus,+laoreet+vel+mollis+a,+tincidunt+vel+ipsum.+Sed+blandit+vehicula+sollicitudin.+Donec+et+sapien+justo.+Ut+fermentum+ipsum+imperdiet+diam+condimentum,+eget+varius+sapien+dictum.+Sed+sed+elit+egestas+libero+maximus+finibus+eu+eget+massa.
++++++++
++++++++Duis+finibus+vestibulum+finibus.+Nunc+lobortis+lacus+ut+libero+mattis+tempor.+Nulla+a+nunc+at+nisl+elementum+congue.+Nunc+eu+consectetur+mauris.+Etiam+non+placerat+massa.+Etiam+eu+urna+in+metus+tempus+molestie+sed+eget+diam.+Nunc+sem+velit,+elementum+sit+amet+fringilla+in,+dictum+sit+amet+sem.+Quisque+convallis+faucibus+purus+dignissim+dictum.+Sed+semper,+mi+vel+accumsan+sollicitudin,+massa+massa+pellentesque+justo,+eget+auctor+sapien+enim+ac+elit.
++++++++
++++++++Nullam+turpis+augue,+lacinia+ut+libero+ac,+rhoncus+bibendum+ligula.+Mauris+ullamcorper+maximus+turpis,+a+consequat+turpis+bibendum+sit+amet.+Nam+vitae+dui+nec+velit+hendrerit+faucibus.+Vivamus+nunc+diam,+porta+tristique+augue+nec,+dignissim+venenatis+felis.+Proin+mattis+id+risus+in+feugiat.+Etiam+cursus+faucibus+nisi.+In+in+nisi+ullamcorper,+convallis+lectus+et,+ornare+nulla.+Cras+tristique+nulla+eros,+non+maximus+odio+imperdiet+eu.+Nullam+egestas+dignissim+est,+et+fringilla+odio+pretium+eleifend.+Nullam+tincidunt+sapien+fermentum,+rhoncus+risus+ac,+ullamcorper+libero.+Vestibulum+bibendum+molestie+dui+nec+tincidunt.+Mauris+tempus,+orci+ut+congue+vulputate,+erat+orci+aliquam+orci,+sed+eleifend+orci+dui+sed+tellus.+Pellentesque+pellentesque+massa+vulputate+urna+pretium,+consectetur+pulvinar+orci+pulvinar.
++++++++
++++++++Donec+aliquet+imperdiet+ex,+et+tincidunt+risus+convallis+eget.+Etiam+eu+fermentum+lectus,+molestie+eleifend+nisi.+Orci+varius+natoque+penatibus+et+magnis+dis+parturient+montes,+nascetur+ridiculus+mus.+Nullam+dignissim,+erat+vitae+congue+molestie,+ante+urna+sagittis+est,+et+sagittis+lacus+risus+vitae+est.+Sed+elementum+ipsum+et+pellentesque+dignissim.+Sed+vehicula+feugiat+pretium.+Donec+ex+lacus,+dictum+faucibus+lectus+sit+amet,+tempus+hendrerit+ante.+Ut+sollicitudin+sodales+metus,+at+placerat+risus+viverra+ut.
++++++++
++++++++Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit.+Nunc+vestibulum+metus+sit+amet+urna+lobortis+sollicitudin.+Nulla+mattis+purus+porta+lorem+tempor,+a+cursus+tellus+facilisis.+Aliquam+pretium+nibh+vitae+elit+placerat+vestibulum.+Duis+felis+ipsum,+consectetur+id+pellentesque+in,+porta+sit+amet+sapien.+Ut+tristique+enim+sem,+laoreet+bibendum+nisl+fermentum+vitae.+Ut+aliquet+sem+ac+lorem+malesuada+sodales.+Fusce+iaculis+ipsum+ex,+in+mollis+dolor+dapibus+sit+amet.+In+convallis+felis+in+orci+fermentum+gravida+a+vel+orci.+Sed+tincidunt+porta+nibh+sit+amet+varius.+Donec+et+odio+eget+odio+tempus+auctor+ac+eget+ex.
++++++++
++++++++Duis+finibus+vestibulum+finibus.+Nunc+lobortis+lacus+ut+libero+mattis+tempor.+Nulla+a+nunc+at+nisl+elementum+congue.+Nunc+eu+consectetur+mauris.+Etiam+non+placerat+massa.+Etiam+eu+urna+in+metus+tempus+molestie+sed+eget+diam.+Nunc+sem+velit,+elementum+sit+amet+fringilla+in,+dictum+sit+amet+sem.+Quisque+convallis+faucibus+purus+dignissim+dictum.+Sed+semper,+mi+vel+accumsan+sollicitudin,+massa+massa+pellentesque+justo,+eget+auctor+sapien+enim+ac+elit.
++++++++
++++++++Nullam+turpis+augue,+lacinia+ut+libero+ac,+rhoncus+bibendum+ligula.+Mauris+ullamcorper+maximus+turpis,+a+consequat+turpis+bibendum+sit+amet.+Nam+vitae+dui+nec+velit+hendrerit+faucibus.+Vivamus+nunc+diam,+porta+tristique+augue+nec,+dignissim+venenatis+felis.+Proin+mattis+id+risus+in+feugiat.+Etiam+cursus+faucibus+nisi.+In+in+nisi+ullamcorper,+convallis+lectus+et,+ornare+nulla.+Cras+tristique+nulla+eros,+non+maximus+odio+imperdiet+eu.+Nullam+egestas+dignissim+est,+et+fringilla+odio+pretium+eleifend.+Nullam+tincidunt+sapien+fermentum,+rhoncus+risus+ac,+ullamcorper+libero.
++++++</p>
++++</div>
++++<footer>
++++++This+is+the+text+that+goes+at+the+bottom+of+every+page.
++++</footer>
+++
++</body>
</html>|55037|55038|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|M|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|I|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|K|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}
header {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }
   header {
    position: fixed;
    top: 0;
    overflow: avoid;
  }

  .content-block, p {
    page-break-inside: avoid;
    position: relative;
    width: 100%;
    top:1em;   //match size of header
    left:0px;
    right:0px;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
  .hidden-print{
  display: none;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
  &lt;head&gt;&lt;/head&gt;
  &lt;body&gt;
  &lt;button class="hidden-print" onClick="window.print()"&gt;Print&lt;/button&gt;
  &lt;header&gt;unclassified&lt;br&gt;&lt;br&gt;&lt;/header&gt;
    &lt;h1&gt;
      Example Document
    &lt;/h1&gt;
    &lt;div&gt;
      &lt;p&gt;
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div&gt;
      &lt;h3&gt;
        Example Section I
      &lt;/h3&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;div class="content-block"&gt;
      &lt;h3&gt;Example Section II&lt;/h3&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      &lt;/p&gt;
      &lt;p&gt;
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      &lt;/p&gt;
    &lt;/div&gt;
    &lt;footer&gt;
      This is the text that goes at the bottom of every page.
    &lt;/footer&gt;
   
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>


blocks|key|2542188|text|最好的解决方案来自于比克雷姆·穆罕默德。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2542189|但它的答案有一个小问题。当页数大于1时，页脚不会定位到最后一页的页脚。|2542190|将这个小css添加到由footer-info折叠的元素中|2542191|position:+fixed;
bottom:+0;|code-block|syntax|javascript|2542192|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|O|8|@]|9|@]|A|$]]|$1|F|3|G|5|H|7|P|8|@]|9|@]|A|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>the best solution came from biskrem muhammad.</p>
<p>but there is a little problem with its answer. when page count bigger than 1, footer not locating to the footer of the last page.</p>
<p>add this little css to your element collapsed by footer-info</p>
<pre><code>position: fixed;
bottom: 0;
</code></pre>


blocks|key|54975|text|Muhammad+Musavi的评论是最好的答案，所以它在这里作为一个实际的答案浮出水面：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|54976|thead/tfoot在每个页面的顶部和底部自动重复。但是，tfoot不会粘到最后一页的底部。|offset|length|style|CODE|54977|打印中的position:+fixed将在每一页上重复，页脚将粘贴到所有页面的底部，包括最后一页-但是，它不会为其内容留出空间。|54978|将它们组合起来：|54979|HTML：|54980|<header>(repeated+header)</header>

<table+class=paging><thead><tr><td>&nbsp;</td></tr></thead><tbody><tr><td>

(content+goes+here)

</td></tr></tbody><tfoot><tr><td>&nbsp;</td></tr></tfoot></table>

<footer>(repeated+footer)</footer>|code-block|syntax|javascript|54981|CSS：|54982|@page+{
++++size:+letter;
++++margin:+.5in;
}

@media+print+{
++++table.paging+thead+td,+table.paging+tfoot+td+{
++++++++height:+.5in;
++++}
}

header,+footer+{
++++width:+100%25;+height:+.5in;
}

header+{
++++position:+absolute;
++++top:+0;
}

@media+print+{
++++header,+footer+{
++++++++position:+fixed;
++++}
++++
++++footer+{
++++++++bottom:+0;
++++}
}|54983|你可以在这里添加很多细节，但我特意将其删减到最低限度，以获得清晰的呈现页眉和页脚，只在屏幕上出现一次，并出现在每个打印页面的顶部和底部。|54984|https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a|54985|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|B|0|4|F|0|0|0|0|0|0|0|0|2K|0|0^^$0|@$1|2|3|4|5|6|7|17|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|18|8|@$D|19|E|1A|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|1B|8|@$D|1C|E|1D|F|G]]|9|@]|A|$]]|$1|J|3|K|5|6|7|1E|8|@]|9|@]|A|$]]|$1|L|3|M|5|6|7|1F|8|@]|9|@]|A|$]]|$1|N|3|O|5|P|7|1G|8|@]|9|@]|A|$Q|R]]|$1|S|3|T|5|6|7|1H|8|@]|9|@]|A|$]]|$1|U|3|V|5|P|7|1I|8|@]|9|@]|A|$Q|R]]|$1|W|3|X|5|6|7|1J|8|@]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1K|8|@]|9|@$D|1L|E|1M|1|1N]]|A|$]]|$1|10|3|-4|5|6|7|1O|8|@]|9|@]|A|$]]]|11|$12|$5|13|14|15|A|$16|Z]]]]

<p>Muhammad Musavi's comment is the best answer, so here it is surfaced as an actual Answer:</p>
<p><code>thead/tfoot</code> are automatically repeated on the top and bottom of each page. However, tfoot isn't sticky to the bottom of the last page.</p>
<p><code>position: fixed</code> in print will repeat on each page, and the footer will stick to the bottom of all pages including the last one - but, it won't create space for its contents.</p>
<p>Combine them:</p>
<p>HTML:</p>
<pre><code>&lt;header&gt;(repeated header)&lt;/header&gt;

&lt;table class=paging&gt;&lt;thead&gt;&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/thead&gt;&lt;tbody&gt;&lt;tr&gt;&lt;td&gt;

(content goes here)

&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;tfoot&gt;&lt;tr&gt;&lt;td&gt;&amp;nbsp;&lt;/td&gt;&lt;/tr&gt;&lt;/tfoot&gt;&lt;/table&gt;

&lt;footer&gt;(repeated footer)&lt;/footer&gt;
</code></pre>
<p>CSS:</p>
<pre><code>@page {
    size: letter;
    margin: .5in;
}

@media print {
    table.paging thead td, table.paging tfoot td {
        height: .5in;
    }
}

header, footer {
    width: 100%; height: .5in;
}

header {
    position: absolute;
    top: 0;
}

@media print {
    header, footer {
        position: fixed;
    }
    
    footer {
        bottom: 0;
    }
}
</code></pre>
<p>There are a lot of niceties you can add in here, but I've intentionally slashed this to the bare minimum to get a cleanly rendering header and footer, appearing once on-screen and at the top and bottom of every printed page.</p>
<p><a href="https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a" rel="noreferrer">https://medium.com/@Idan_Co/the-ultimate-print-html-template-with-header-footer-568f415f6d2a</a></p>


blocks|key|2753745|text|我的文档有很大的页眉和页脚，超过250px。页眉、页脚需要粘贴在文档的顶部和末尾。我的解决方案结合了比斯克莱姆·穆罕默德和克里斯·莫斯基尼的两个想法。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2753746|理念：|offset|length|style|BOLD|2753747|2753748|将你的页眉放入<thead>，就像比斯克雷姆的|unordered-list-item|CODE|2753749|把你的页脚放入<div+class="footer">，就像克里斯的|2753750|2753751|HTML：|2753752|<body>
++++<table+class="report-container">
++++++++<thead+class="report-header">
++++++++++++<tr>
++++++++++++++++<th+class="report-header-cell">
++++++++++++++++++++<div+class="header-info">
++++++++++++++++++++++++(your+header)
++++++++++++++++++++</div>
++++++++++++++++</th>
++++++++++++</tr>
++++++++</thead>
++++++++<tbody+class="report-content">
++++++++++++<tr>
++++++++++++++++<td+class="report-content-cell">
++++++++++++++++++++<div+class="main">
++++++++++++++++++++++++(your+body)
++++++++++++++++++++</div>
++++++++++++++++</td>
++++++++++++</tr>
++++++++</tbody>
++++++++<tfoot+class="report-footer">
++++++++++++<tr>
++++++++++++++++<td>
++++++++++++++++++++<div+class="footer-space">&nbsp;</div>
++++++++++++++++</td>
++++++++++++</tr>
++++++++</tfoot>
++++</table>
++++<div+class="footer">
++++++++(your+footer)
++++</div>
</body>|code-block|syntax|javascript|2753753|CSS:|2753754|++table.report-container+{
++++page-break-after:always;
++++width:+100%25;
++}

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

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

++.footer-space,+.footer+{
++++height:+270px;//+this+is+my+footer+height
++}

++.footer+{
++++position:+fixed;
++++bottom:+0;
++}
++@media+print+{
++++tr+td+{
++++++word-wrap:+break-word;
++++++overflow-wrap:+break-word;
++++}
++}|2753755|我使用ejs生成用于打印的html，所以我不需要在普通网页的显示上工作。|2753756|问题:这在Chrome打印机上是有效的，但是对于我代码中的Safari，页脚没有显示，我还不知道根本原因。也许它在其他平台上也会有问题。|2753757|entityMap^0|0|0|3|0|0|7|7|0|7|K|0|0|0|0|0|4|0|0|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|17|8|@$D|18|E|19|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|I|3|J|5|K|7|1B|8|@$D|1C|E|1D|F|L]]|9|@]|A|$]]|$1|M|3|N|5|K|7|1E|8|@$D|1F|E|1G|F|L]]|9|@]|A|$]]|$1|O|3|-4|5|6|7|1H|8|@]|9|@]|A|$]]|$1|P|3|Q|5|6|7|1I|8|@]|9|@]|A|$]]|$1|R|3|S|5|T|7|1J|8|@]|9|@]|A|$U|V]]|$1|W|3|X|5|6|7|1K|8|@$D|1L|E|1M|F|G]]|9|@]|A|$]]|$1|Y|3|Z|5|T|7|1N|8|@]|9|@]|A|$U|V]]|$1|10|3|11|5|6|7|1O|8|@]|9|@]|A|$]]|$1|12|3|13|5|6|7|1P|8|@]|9|@]|A|$]]|$1|14|3|-4|5|6|7|1Q|8|@]|9|@]|A|$]]]|15|$]]

<p>My document has big header and footer, over 250px. The header, footer need to be sticked at the top and the end of the document. My solution is combined by both ideas from Biskrem Muhammad, Chris Moschini.</p>
<p><strong>Idea:</strong></p>
<ul>
<li>Put your header in <code>&lt;thead&gt;</code> like Biskrem's</li>
<li>Put your footer in <code>&lt;div class=&quot;footer&quot;&gt;</code> like Chris's</li>
</ul>
<p><strong>HTML:</strong></p>
<pre><code>&lt;body&gt;
    &lt;table class=&quot;report-container&quot;&gt;
        &lt;thead class=&quot;report-header&quot;&gt;
            &lt;tr&gt;
                &lt;th class=&quot;report-header-cell&quot;&gt;
                    &lt;div class=&quot;header-info&quot;&gt;
                        (your header)
                    &lt;/div&gt;
                &lt;/th&gt;
            &lt;/tr&gt;
        &lt;/thead&gt;
        &lt;tbody class=&quot;report-content&quot;&gt;
            &lt;tr&gt;
                &lt;td class=&quot;report-content-cell&quot;&gt;
                    &lt;div class=&quot;main&quot;&gt;
                        (your body)
                    &lt;/div&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;tfoot class=&quot;report-footer&quot;&gt;
            &lt;tr&gt;
                &lt;td&gt;
                    &lt;div class=&quot;footer-space&quot;&gt;&amp;nbsp;&lt;/div&gt;
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tfoot&gt;
    &lt;/table&gt;
    &lt;div class=&quot;footer&quot;&gt;
        (your footer)
    &lt;/div&gt;
&lt;/body&gt;
</code></pre>
<p><strong>CSS:</strong></p>
<pre><code>  table.report-container {
    page-break-after:always;
    width: 100%;
  }

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

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

  .footer-space, .footer {
    height: 270px;// this is my footer height
  }

  .footer {
    position: fixed;
    bottom: 0;
  }
  @media print {
    tr td {
      word-wrap: break-word;
      overflow-wrap: break-word;
    }
  }
</code></pre>
<p>I use ejs to generate html for printing, so I don't need to work on the display in normal webpage.</p>
<p>Problem: This works in Chrome printer, but for Safari in my code, the footer is not showed, I don't know the root cause yet. Maybe it will have problem with other platforms too.</p>


blocks|key|2542323|text|真正的诀窍是使用position:+fixed让它显示在每个页面上，并使用一个<tfoot>元素来避免在多个页面上重叠。唯一的缺点是你需要知道页脚高度，但是如果你使用JS，这可能是动态的。类似这样的$('.footer').height($('.footer').children().first().height())。可以使用<thead>以相同的方式添加标头。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|2542324|​|2542325|@page+{
++size:+8.5in+11in;
}

.page+{
++page-break-after:+always;
}

.footer+{
++height:+75px;
}

.footer>div+{
++position:+fixed;
++bottom:+0;
}

body+{
++font-size:+42px;
++font-family:+sans-serif;
}|code-block|syntax|javascript|2542326|<button+onclick="print()">print</button>

<table>
++<tbody>
++++<tr>
++++++<td>
++++++++<div+class="page">PAGE+1</div>
++++++++<div+class="page">
++++++++++<div>PAGE+2+OVERFLOWING</div>
++++++++++<div>Lorem+ipsum+dolor+sit+amet,+consectetur+adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute
++++++++++++irure+dolor+in+reprehenderit+in+voluptate+velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.+Lorem+ipsum+dolor+sit+amet,+consectetur
++++++++++++adipiscing+elit,+sed+do+eiusmod+tempor+incididunt+ut+labore+et+dolore+magna+aliqua.+Ut+enim+ad+minim+veniam,+quis+nostrud+exercitation+ullamco+laboris+nisi+ut+aliquip+ex+ea+commodo+consequat.+Duis+aute+irure+dolor+in+reprehenderit+in+voluptate
++++++++++++velit+esse+cillum+dolore+eu+fugiat+nulla+pariatur.+Excepteur+sint+occaecat+cupidatat+non+proident,+sunt+in+culpa+qui+officia+deserunt+mollit+anim+id+est+laborum.
++++++++++</div>
++++++++</div>
++++++++<div+class="page">PAGE+THREE</div>
++++++</td>
++++</tr>
++</tbody>
++<tfoot>
++++<tr>
++++++<td+class="footer">
++++++++<div>©+1999+Footer+Example</div>
++++++</td>
++++</tr>
++</tfoot>
</table>|2542327|2542328|entityMap^0|8|F|13|7|2R|1P|4L|7|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]|$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|10|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|11|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|12|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|13|8|@]|D|@]|E|$]]|$1|P|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|Q|$]]

<p>The real trick is to use <code>position: fixed</code> for it to show on every page, and a <code>&lt;tfoot&gt;</code> element to avoid overlap on multiple pages. The only drawback is you need to know the footer height, but this can be dynamic if you use JS. Something like this <code>$('.footer').height($('.footer').children().first().height())</code>. A header can be added the same way using a <code>&lt;thead&gt;</code>.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>@page {
  size: 8.5in 11in;
}

.page {
  page-break-after: always;
}

.footer {
  height: 75px;
}

.footer&gt;div {
  position: fixed;
  bottom: 0;
}

body {
  font-size: 42px;
  font-family: sans-serif;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="print()"&gt;print&lt;/button&gt;

&lt;table&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;
        &lt;div class="page"&gt;PAGE 1&lt;/div&gt;
        &lt;div class="page"&gt;
          &lt;div&gt;PAGE 2 OVERFLOWING&lt;/div&gt;
          &lt;div&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
            irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
            adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="page"&gt;PAGE THREE&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td class="footer"&gt;
        &lt;div&gt;© 1999 Footer Example&lt;/div&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>Is it possible to print HTML pages with custom headers and footers on each printed page?</p>

<p>I'd like to add the word "UNCLASSIFIED" in Red, Arial, size 16pt to the top and bottom of every <em>printed</em> page, regardless of the content.</p>

<p>To clarify, if the document was printed onto 5 pages, each page should have the custom header and footer.</p>

<p>Does anybody know if this is possible using HTML/CSS?</p>


How to use HTML to print header and footer on every printed page of a document?

服务器

容器

HTML5

是否可以在每个打印页面上打印具有自定义页眉和页脚的HTML页面？我想在每个打印页面的顶部和底部添加红色，Arial，大小为16磅的“未分类”一词，无论内容如何。为了清楚起见，如果文档打印到5页上，则每页都应该有自定义页眉和页脚。有没有人知道使用HTML/CSS可以做到这一点？

问如何使用HTML在文档的每一页打印页眉和页脚？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML在文档的每一页打印页眉和页脚？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何使用HTML在文档的每一页打印页眉和页脚？
EN