在打印 CSS 上的每个页面周围画一个边框？

Question

打印时我需要在每一页周围画一个边框。我最初是使用带有分页符的 div 来完成此操作的，例如：

@media print {
.contentContainer {
position: inline;
height: 98%;
width: 100%;
top: 0px;
left: 0px;
bottom:0px;
right:0px;
border:2px solid;
page-break-after:always;
}  

这可行，但用户内容已更改，因此无法在运行前确定哪些内容将出现在单个页面上以及哪些内容需要溢出。因此，此方法不再有效（如果 .contentContainer 溢出，边框将跨越两页）。

我需要一种方法，它可以仅在打印时在每个页面周围绘制边框，理想情况下仅通过 CSS。这只是内部的，所以如果它只适用于 Chrome，那很好，但 IE 11 支持会很好。其他任何事情都不是我的选择。

请注意，我已经看到了类似的问题，但它对我不起作用，因为我无法保证分页只会在分页后发生。

编辑：我已经看到下面链接的问题。该解决方案对我不起作用，因为我无法控制分页，也不知道会有多少页。

Answer 1

我建议您限制页面中的内容，然后，您可以使用分页符类创建一个简单的 DIV 元素。

<!-- content block -->
<div class="page-break"></div>
<!-- content block -->

CSS：

    @media print{
    .page-break { 
        height:2px; 
        border-top:1px solid #999; 
        margin-bottom:13px;
        page-break-after: always;  
    }
}

此外，您可以在每个 h1 元素之前或节之后插入分页符：

 h1 {page-break-before: always;}
 section {page-break-after: always; border-bottom:1px solid #999;}

希望对你有帮助！