Page break issue in browsers print

Question

This is how my Html page looks in print view.

I need to put it on new page when it breaks in 2 and for that need to insert below div before these elements (something which I am doing for other predefined new pages).

<div style='page-break-before: always'>

But I am not able to do so as these contents are dynamic and I have no idea exactly which HTML element will fall at this place.

If I somehow manage to track HTML element at page break point, I will simply put page-break code just above it. This need to be done on html page with jQuery as print view doesn't support js.

I tried to do it like this but failed here as well. Looks like print view doesn't support position: absolute.

$(document).ready(function(){
    $("body").append("<div style='position: absolute;top: 760px;page-break-before: always'>");
});

Answer 1

Try this article

Make Sure You use

@media print {
    .page-break { display: block; page-break-before: always; }
}