如果达到div高度，则将内容强制到新的打印页面上

Question

我有一个HTML / CSS可打印形式，该形式使用PHP从MySQL数据库获取内容。 我很难弄清楚如果内容部分已满，如何使中间内容部分打印另一页。 我需要将徽标和订单总数部分保留在适当的位置，并且只跟踪中间内容部分。

有没有办法用JavaScript做到这一点？ 或针对此问题的最佳解决方案是什么？

随附屏幕截图标记，以帮助您发现问题。

http://timkipptutorials.com/images/linked/page1.png http://timkipptutorials.com/images/linked/page2.png

Answer 1

如果使用div标签，则在每个页面上打印页眉和页脚是非常困难的任务。 在我的项目中，我几乎搜索了整个网络，发现要打印页眉和页脚，每个页面都必须使用表格和CSS规则，而不必使用table和CSS，就不能在每个页面上打印页眉。 我正在为您提供执行此操作的代码，如下所示：

<style>
    @media screen{thead{display:none;}}
    @media print{thead{display:table-header-group; margin-bottom:2px;}}
    @page{margin-top:1cm;margin-left:1cm;margin-right:1cm;margin-bottom:1.5cm;}}
</style>

第一条CSS规则使表格thead不会在用户的屏幕上显示，第二条规则定义在打印过程中thead显示为table-header-group，因为如果忽略此标头，该规则将在每个页面上显示标头在每页上打印，第三个规则是保持页眉或页脚重叠的页边距，并且您的html代码如下所示：

<table>
    <thead>
        <tr>
            <th>  <---  Your header text would be placed here    --->  </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <--- Your printing text would be place here    ---> 
            </td>
        </tr>
    </tbody>
</table>

最后一件事，我已经尝试在IE，Safari，Firefox和Chrome上使用事物代码，并想告诉您，在Chrome上，标题仅打印在第一页上。 我也曾多次报告该错误，但Chrome对此问题没有任何处理。