How to add auto detect page break

Question

I have created a web page to show billing details. Some of the bills have lots of details and if this bill's details do not to fit into an A4 sheet of paper I want to add a page break. How can I detect that automatically, should I add a page break?

Answer 1

page-break-before : Specifies whether a new page should be started before a particular element.

page-break-after : Specifies how to handle page breaks after a particular element.

always : Force a page break before or after the specified element

Insert .header(or other name) and .footer(or other name) between content to website,like this:

<div class="header"></div>
...content...
<div class="footer"></div>

<div class="header"></div>
...content...
<div class="footer"></div>

after it use :

.header {
  page-break-before:always;
}

.footer {
  page-break-after:always;
}

.header, .footer {
  display: none;
}

@media print {

.header, .footer {
  display: block;
}
  .header {
    page-break-before:always;
  }

  .footer {
    page-break-after:always;
  }
}

<div class="header"></div>
<p>...content...</p>
<div class="footer"></div>

<div class="header"></div>
<p>...content...</p>
<div class="footer"></div>