在打印时在每一页周围画一个边框 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

我建议您限制页面中的内容，然后，您可以创建一个带有分页符 class.

的简单 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;}

希望对您有所帮助！

在打印时在每一页周围画一个边框 CSS？

Draw a border around each page on print CSS?

html

css

styling