使用page-break-after:always实现页面分页打印

最近碰到一个需求，需要前端将在一个页面内调用浏览器的window.print()方法，打印当前页面。但是呢，需要将三个DIV分页打印：

<div style="height:290mm">我是封面</div>
<div style="height:290mm">我是目录，你不知道我的内容有多长</div>
<div>我是正文，我需要从一个新页面开始展示</div>

开始我想到的办法是，将前两个div的高度设置为 290mm(A4纸的高度)，如上述代码。这样的话，他们正好各占据一面，正文自动在新页面开始，但这只适用于目录不超过一页的情况，而且必须是A4纸打印，而且，290mm是A4纸的高度，你不知道用户会不会设置页边距，页边距会设置多少。显然这种方式治标不治本。

后来，我发现可以使用css的 page-break-after:always 来控制在某个DIV之后新开一个页面，代码如下：

<div style="page-break-after:always">我是封面</div>
<div style="page-break-after:always">我是目录，你不知道我的内容有多长</div>
<div>我是正文，我需要从一个新页面开始展示</div>

这样的话，无论div有多长，在它之后一定会新开一个页面再打印。就避免了计算高度的问题。完美解决我的问题。