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

Jer*_*rry 6 css

我正在尝试生成一个CSS类,它将帮助我定义"分页符".

我知道,如果我使用@media:print .MyDiv{ width:100%; height:100%; },我可以那么类的设置divMyDiv,这将是-尽可能地- 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>
Run Code Online (Sandbox Code Playgroud)

Mar*_*iek 15

这是印刷品,对吗?

你能用这个吗?

<p style="page-break-before: always"></p>
Run Code Online (Sandbox Code Playgroud)

还有其他一些页面拆分选项也值得了解.