html 页面分页打印不完整的解决方法

项目中有些页面有打印功能，但是当页面内容过多时，发现打印出来的内容还是只有一页，实际上应该需要 2 页或 3 页才对，并没有完全打印出来。后来发现 page-break-before 和 page-break-after 这两个 css 属性，可以实现在指定元素位置进行分页。page-break-before 会在当前元素之前分页，而 page-break-after 会在当前元素之后分页。

这两个属性的主要属性值有：
auto：默认，如果必要则在元素（前）后插入分页符。
always：总会在元素（前）后插入分页符。

在页面指定元素添加好属性后，发现并没有用。无意中缩放了一下浏览器页面，然后打印预览，竟然分页了。于是便猜想打印不完整可能跟页面内容比例有关，既然缩放了可以打印完整，那么在不缩放的情况下，如果在页面下方添加一定高度的空白 div，是不是也有一样的效果呢？

添加了 500px 的空白 div 后，浏览器缩放调到正常 100% 状态，打印预览，成功分页。

这个时候我的页面上只有一个 page-break-before 属性，有些页面内容少，成功的分成了两页。但是发现有些内容过多的页面，也就是 page-break-before 属性之前的内容有很多，这些内容也自行分页了，最终结果就是成功的分成了 3 页，这确实是我想要的结果，但是这就意味着，前面过多的内容那里没有加 page-break-before 属性也成功的分页了。那是不是整个页面都不需要 page-break-before 这样的属性，只需在底部添加空白 div，就可以完成分页呢？由于时间关系，之前并没有做这样的测试，明天到公司再研究下，嗯，就这样。