检测div溢出并做某事[关闭]

The scenario: I need to create a .pdf file from a webpage. this web pages constructs an A4 sized page with a header, content and footer div. the content div can sometimes contain to much information to fit on 1 page so i need to create a second page if the content div overflows. Every page needs to contain the header, content and footer div. (the div contains page numbers and signatures which need to be on every page)

A colleague has already created a .php file to do this, however if there's to much data the footer div will continue on the next page (talking about actual A4 sized pages). he did all of this by counting lines in the content div. it works for 2 pages but everything more is messed up. So since i'm quite new to .php and html i wanted to dive into it and do things the right way (detecting overflow and then making the new page).

I've tried tweaking the lines allowed on each page but in the end it's just a hack and i know i can detect the overflow in some way but i can't figure out how to make everything work

The problem: counting lines in a div is not reliable, especially since every new piece of data (mileage, hours, expenses) has a small table header which takes up some space on the page as well. and although I've tried tweaking the line numbers, in the end when the document gets to big the header won't start at the top of the page. so i want to make this more robust and make sure the sizes of the div's can't change and all the information is shown (meaning no data is hidden since the div is overflowing).

The question How do i start a new 'page' when the current content div is overflowing?

The code

<?php
    for($pageID = 1; $pageID <= $NumberOfPages; $pageID++){
    $LinesLeft = $linesPerPage;
?>
<div class="header"> Header stuff here </div> // always the same info in this div
<div class="content"> 
 <table border="0" width="100%">      
    <tr>    
      <td valign="top" width="7%">
        <b>Aantal :</b><br>
      </td>

      <td valign="top">
        <b>Materialen :</b><br>           
      </td>       
    </tr>

    <?php 
        for($idx = 0; $idx < $LinesForThisPage; $idx++){
            echo "<tr height=\"22\">     
                  <td style=\"border-bottom: 1px solid black;\">" . $Materialen[$anchorB + $idx]['Aantal'] . "</td>
                  <td style=\"border-bottom: 1px solid black;\">" . $Materialen[$anchorB + $idx]['Omschrijving'] . "</td>
              </tr>";
        }
        $anchor += $idx; // anchor is the current index of where i've left with displaying information.
    ?>

  </table>
 </div>
<div class="footer"> footer stuff </div> // always the same info in this div

EDIT I've shortened my question considerably and added code.

To detect if the content of a div is overflowing you can compare its height to scrollHeight. If it overflows, scrollHeight will be greater.

var $el = $('#foo');
if ($el.height() < $el[0].scrollHeight) {
    console.log('this element is overflowing....');
}