html - verify that each div will be on separated print page

Question

I have many divs that proposed to be printed - on different pages. How can I make sure that when the user is clicking the print button, each div will be on a different page?

Thanks!

Answer 1

You can use the page-break-after attribute in the print media query. The advantage is, that you don't have to change the size of your divs, it just makes sure that the page break will be after the div.

@media print {
    div {
        page-break-after: always;
    }
}

More information about page-break-after on MDN.

Answer 2

In css, there is a media query you can use to specifically format your web page for when you want to print it:

@media print {
  /* insert your style declarations here */
  div {
    page-break-after: always; /* ensures the next will we appear on new page */
  }
}

You can use this media query to make each div fill up an entire page when the user decides to print. You can use this to modify things like removing the navbar when the user decides to print.

On the other hand, to avoid direct breaks after a certain element use page-break-after: avoid;

You can also for the use to print in a certain format that you want to specify using the follow:

@page {
  size: A4; /* or A4 landscape or A5 */
}