打印HTML文档时所有页面中的HTML页眉和页脚

我创建了一个带有页眉、一些内容和页脚的html页面。我试图打印HTML页面，共有2页。我在第一页看到页眉，在最后一页看到页脚

我真正需要的是在所有页面中显示页眉和页脚，就像在word文档中一样

我检查并发现，使用带有thead和tfoot的表格式，就可以做到这一点。 它在firefox和IE中工作，但在chrome中不起作用。这是webkit浏览器兼容性问题吗

有没有其他兼容所有浏览器的方法

---

更新：截至2021年4月，该漏洞仍然存在。正如SHAKU在下面提到的

您可以使用“@print”css媒体样式定义专门针对打印样式。这将允许您在打印文档时以及在打印预览中创建单独的样式

我会从这个坚实的基础开始

    @media print {

    * {
        color: #000 !important;
        -webkit-text-shadow: none !important;
        text-shadow: none !important;
        font-family: "Times New Roman", Times, serif;
        background: transparent !important;
        -webkit-box-shadow: none !important;
        box-shadow: none !important;
        border: none!important;
        font-weight: normal!Important;
    }

    header, nav, footer {
       overflow:visible;
    }

    .body {
        width: auto;
        border: 0;
        margin: 0 5%;
        padding: 0;
        float: none !important;
    }


    a, a:link, a:visited {

        &[href]:after {
            content: " (" attr(href) ") ";
            font-size: 90%;
        }

        &[href^="javascript:"],
        &[href^="#"] {
            &:after {
                content: "";
            }
        }
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}

---

使用通过打印介质类型激活的固定定位元素：

#header, #footer {
     display: none;
}
@media print
{
    #header, #footer {
         position: fixed;
         display: block;
         top: 0;
    }
    #footer {
         bottom: 0;
    }
}

---

（这里假设您有id为

页眉
和
页脚
的div元素）。
我也遇到了同样的问题，找到了最适合我的简单标记

<table>
  <thead>
    <tr><td>
      content that should be printed as page header
    </td></tr>
  </thead>
  <tbody>
    <tr><td>
      content that will be spread over all pages consecutively
    </td></tr>
  </tbody>
</table>


应打印为页眉的内容
将连续分布在所有页面上的内容

该表在浏览器中看起来像一个简单的表，但在打印输出中，
标记的内容在每页上重复。不需要CSS

在Firefox32、IE 11甚至MS Word 2010中进行了测试。Word不会将标记转换为“真实”页面标题，而是在每个页面顶部重复内容。（您可能必须切换到“页面视图”才能真正看到Word中的差异）。
上述答案都不是问题的答案。根据我的经验，目前没有单一的清洁解决方案。感觉chrome故意避免了这个bug
 你在做什么有点不清楚。您已经用HTML5标记了这个问题，并讨论了一些页眉和页脚（可能是
和
元素）但是提到
和
。我使用and创建页眉和页脚。但是当我尝试打印html页面时，页眉出现在一个页面中，页脚出现在另一个页面中。因此，我改变了这一点，并使用thead作为页眉，使用tfoot作为页脚，以获得我们在word文档中看到的页眉和页脚，只有在打印时。我希望你能得到一个更清晰的图片，而不是像
thead
和
tfoot
那样是表格元素，这样你的整个布局看起来就实现了。尽管如此，您仍然可以控制分页符。请检查：@feeela：如果我错了，请更正我，但是CSS分页符-*属性用于分页符。我正在寻找的是一种在打印时让HTML文档的页眉和页脚出现在所有页面中的方法。谢谢你的回答。我尝试了这个。对于只打印一个页面的html，它可以正常工作。页眉和页脚完美地位于顶部和底部。但是当有多个页面时，页脚会在打印时出现在最后一页。@BennetSam如果在要拆分内容的位置插入类似于：
的元素？（您还应该能够进一步设置div的样式）。当然，如果让浏览器确定中断，这会强制在某些点中断。截至2016年1月4日，这在Firefox和IE中确实有效，但不幸的是，Chrome没有在每个打印输出页面上重复AD标记，在Chrome、Firefox甚至MS Word中都可以正常工作。我正试图使Tfoot以类似的方式工作，它在浏览器中工作，但在MS Word中不工作。有什么建议吗？8年前才有报道。。。他们很忙。。。给他们一些时间。