如何使用CSS和HTML模拟分页符？

Question

我正在尝试生成一个CSS类，它将帮助我定义“分页符”。

我知道如果我使用@media:print .MyDiv{ width:100%; height:100%; }，我可以将div的类设置为MyDiv，它将尽可能地 - 1页打印

这很棒，但我遇到了一个我不知道如何处理的新项目，我希望可以做类似的事情。我需要创建一个空的div，它将自己伸展到“页面末尾”。

类似的东西：

<style type="text/css">
@media print .PageBreak { 
    width: 100%; 
    height: *; /* space left on current page */ 
}
@media screen .PageBreak {
    border-bottom: 1px solid black;
}
</style>

<!-- ... -->

<div>This should appear on the first page.</div>

<div class="PageBreak"><!--
    This DIV should stretch itself out so that the next piece
    of content appears on the next page (only when printing).
--></div>

<div>This should appear on the second page.</div>

Answer 1

这是打印，对吗？

你能不能使用它？

<p style="page-break-before: always"></p>

page-break-before还有其他一些值得了解的选项。

Answer 2

如果有人对我使用的解决方案感兴趣：

<style type="text/css">
@media print {
    .PageBreak {
        page-break-before: always;
    }
}
@media screen { 
    .PageBreak { 
        border-bottom: 1px dashed black; 
        width: 100%;
        margin-bottom: 12px; 
    }
}
</style>

这么简单。感谢Mark和Mark。

Answer 3

很抱歉，如果我遗漏了某些内容，但是有理由不能在css中使用默认分页符。

Specifying page breaks for printing using CSS

Answer 4

如果您的html作为附件发送，并且用户正在使用gmail预览文件，则gmail会删除任何具有分页符属性规则的css规则。