title: Insert a page break if the height of a div does not fit in print media?
body: <p>I am dynamically creating elements on a web page which I want to print. I want a page break if the element can't fit in the rest of the A4 size paper.
  Example is this question: <a href="https://stackoverflow.com/questions/45626299/force-an-element-to-take-exactly-half-of-available-height-in-print-media">Force an element to take exactly half of available height in print media</a></p>
  
  <p>In the picture, A broken element is appearing on first page, which should actually go on the second page.</p>
  
  <p>How can I force a page break if the element does not fit in this page. 
  **What I tried: **</p>
  
  <p>I tried to use css <code>page-break</code>after` property, with the following code: </p>
  
  <pre><code>$(document).ready(function(){
  
    $(".row").each(function(){
  
      if($(this).height()&gt;$(document).height()/2){
        $(this).after('&lt;div style="page-break-after:always"&gt;&lt;/div&gt;');
      }
    });
  
  });
  </code></pre>
  
  <p>But it does not work. </p>
  
  <p>Here is a <a href="https://jsfiddle.net/ahuew49m/" rel="nofollow noreferrer">JsFiddle</a></p>