Javascript 我可以保留我的标题吗'；附'；在打印我的网页时是否更改我的内容？

我有一个标准的网页，标题，子标题和文本块，重复下来的页面。 有时，此页面将直接从浏览器打印

显然，无论需要多少页面，网页都需要拆分以适合

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

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

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

也许是使用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>

//大量文本
//大量文本
//大量文本
//大量文本
//大量文本
//大量文本
//大量文本
//大量文本
//大量文本

---

干杯

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

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

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

---

您是否尝试过将副标题和文本放在同一个div中，并在：avoid之后为副标题添加

分页符？我没有。不过，我还是要试试看。干杯