打印网页时，我可以将标题“附加”到我的内容吗？答案

【问题标题】：Can I keep my headers 'attached' to my content when printing my webpage?打印网页时，我可以将标题“附加”到我的内容吗？
【发布时间】：2014-06-26 13:14:13
【问题描述】：

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

显然需要拆分网页以适应许多页面。

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

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

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

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

干杯！

【问题讨论】：

您是否尝试过将 subHeader 和 text 放在同一个 div 中并为 SubHeader 添加page-break-after: avoid？
我没有。不过，我会大吃一惊。干杯。

标签： javascript css browser printing

【解决方案1】：

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

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

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

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

【讨论】：