在打印CSS上的每个页面周围绘制边框？ [英] Draw a border around each page on print CSS?

问题描述

打印时，我需要在每个页面周围绘制边框。我最初使用分页符使用div来完成此操作，如：

  @media print {
 .contentContainer {
位置：内联; 
身高：98％; 
宽度：100％; 
 top：0px; 
 left：0px; 
 bottom：0px; 
 right：0px; 
 border：2px solid; 
 page-break-after：always; 
} 
  

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

我需要一种方法来绘制边框只在印刷品上打印每个页面，理想情况是通过CSS。这只是内部的，所以如果它只能在Chrome中运行，那很好，但IE 11支持会很好。其他任何东西都不适合我。

请注意，我已经看到类似的问题，但它不适用于我，因为我不能确定只有在一个分页后。

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

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

 <！ - 内容块 - > 
< div class =page-break>< / div> 
 <！ - 内容区块 - > 
  

CSS：

  @media print {
 .page-break {
 height：2px; 
 border-top：1px solid＃999; 
 margin-bottom：13px; 
 page-break-after：always; 
 
 
 
 
 
 
 $ b 
另外，你可以在每个h1之前插入一个分页符元素或节之后： 
 
 
  h1 {page-break-before：always;} 
 section {分页符之后：永远; border-bottom：1px solid＃999;} 
  
我希望这会对您有所帮助！
 
I need to draw a border around each page when printing. I had originally done this using divs with pagebreak like:
@media print {
.contentContainer {
position: inline;
height: 98%;
width: 100%;
top: 0px;
left: 0px;
bottom:0px;
right:0px;
border:2px solid;
page-break-after:always;
}  
This worked, but the user content has been changed so that it is no longer possible to determine before runtime what content will go on a single page and what will need to overflow. As a result, this method no longer works (if a .contentContainer overflows, the border will span two pages).

I need a method which will work to draw a border around each page only on print, ideally through just the CSS. This is only internal so if it only works in Chrome, that is fine, but IE 11 support would be nice. Anything else is not an option for me.

Note that I have seen the similar question, but it does not work for me since I cannot garentee that paging will occur only after a page-break-after.

edit: I have seen the question linked below. The solution does not work for me as I have no control over page breaking and do not know how many pages there will be.
解决方案
I recommend you to limit the content in a page and then, you can create a simple DIV element with the page-break class.
<!-- content block -->
<div class="page-break"></div>
<!-- content block -->
The CSS:
    @media print{
    .page-break { 
        height:2px; 
        border-top:1px solid #999; 
        margin-bottom:13px;
        page-break-after: always;  
    }
}
Also, you can insert a page break before each h1 element or after a section:
 h1 {page-break-before: always;}
 section {page-break-after: always; border-bottom:1px solid #999;}
I hope this will help you!

                        
这篇关于在打印CSS上的每个页面周围绘制边框？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！