Draw a border around each page on print CSS?

问题

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.

回答1:

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!

来源：https://stackoverflow.com/questions/32232281/draw-a-border-around-each-page-on-print-css

标签

html

css

styling