CSS 页眉 - 正文 - 页脚打印在单独的页面上答案

【问题标题】：CSS header - body - footer print on separate pagesCSS 页眉 - 正文 - 页脚打印在单独的页面上
【发布时间】：2019-03-22 15:45:23
【问题描述】：

我正在尝试制作一个 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 边距，但它们也会影响页眉和页脚，因此最终会遇到同样的问题。

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

【问题讨论】：

标签： html css printing report

【解决方案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 是不可能实现的。如果有人知道，我会很高兴听到。

【讨论】：