html - 在打印 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;}

希望对您有所帮助!