打印网页时，我可以使标题保持“附加”到我的内容吗？

Question

我有一个标准的网页，标头，子标头和文本块，在页面下重复。 有时，该页面会直接从浏览器中打印。

显然，需要拆分网页以适合于任何页面。

我遇到的问题是，我的一些子标题留在了一页的底部，文本被下推到了下一页。

理想情况下，我希望子标题“跟随”文本。

有人有什么建议吗？ 这甚至是可以解决的问题吗？

使用JavaScript或jQuery还是一些神奇的CSS3？

<div id="mainContent">

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

    <div class="header"></div>
    <div class="subHeader"></div>
    <div class="text">
        //LOTS OF TEXT
    </div>

</div>

干杯!

Answer 1

理想情况下，您需要使用打印样式表。 这将使您更改专门用于打印的CSS。

有各种特定于打印的CSS规则，但您必须在各种浏览器上尝试使用它们。

例如：page-break-after允许您在元素使用后在其上插入分页符

http://www.w3schools.com/cssref/pr_print_pageba.asp