html - CSS header - body - footer 在单独的页面上打印

Question

我正在尝试制作一个 HTML 报告，在打印时，每个页面上都会有一个自定义标题，其中正文内容采用表格形式。页脚是可选的。

环顾四周后，我已经通过使用

使页眉和页脚正常工作

@media print{
    div.divFooter {
        position: fixed;
        bottom: 0;
    }
    div.divHeader {
        position: fixed;
        top: 0;
    }
    /* Fix overflow of headers and content */
    body {
        margin-top: 185px;
    }   
}

但正文仅适用于第一页。对于其他所有页面，正文内容继续并运行到所有后续页面的标题中。我需要的是正文以一定的边距进行分页(例如，从页面底部开始 50 像素)，然后在一定的边距(例如从页面顶部开始 185 像素)后再次开始，因此它被格式化为在每个打印页面上都相同。

我试过使用@page 边距，但它们也会影响页眉和页脚，所以它最终会遇到同样的问题。

内容始终是页眉、表格和页脚。有什么可靠的方法可以按照我所描述的方式进行打印吗？

Answer 1

对于正在寻找此问题答案的任何人，我最终在 html 字符串服务器端每隔 x 行手动生成分页符。

简而言之:

// this string inserts a page break in html
private const string PAGE_BREAK = "<p style=\"page-break-after: always;\">&nbsp;</p><p style=\"page-break-before: always;\">&nbsp;</p>";

if (lineCount % x == 0){
   htmlString.insert("</table>"); // close the table, otherwise the page break does nothing
   htmlString.insert(PAGE_BREAK);
   htmlString.insert("<table class='whatever-you-want-'>");
}

不准确，但这是它的要点。

在浏览了大量的文章、博客文章和堆栈溢出问题之后，看起来我试图完成的事情目前仅使用 html 和 CSS 是不可能的。如果有人不知道，我会很高兴听到。