javascript - 打印我的网页时，我可以将标题 'attached' 保留在我的内容中吗？

Question

我有一个标准网页、标题、子标题和文本 block ，在页面下方重复。偶尔会直接从浏览器打印此页面。

显然需要拆分网页以适应需要的页面数量。

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

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

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

也许使用 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 允许您在元素使用后插入分页符 use it on

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