4

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.

htuy42
  • 307
  • 3
  • 10
  • 1
    Did you try this http://stackoverflow.com/questions/24361501/how-to-make-page-border-in-print-css-for-every-single-page – Chris Yongchu Aug 26 '15 at 17:23

1 Answers1

2

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!

Madalina Taina
  • 1,968
  • 20
  • 26
  • I will try again to implement this. The problem I have had before is that the size of the user content is very unpredictable, so it is hard to know when page break will be necessary (it is a form where user can add information). Will accept if I can get it to work :) – htuy42 Aug 27 '15 at 23:03