обнаружить переполнение div и сделать что-то

Question

Сценарий: Мне нужно создать файл .pdf с веб-страницы. на этих веб-страницах создается страница размера A4 с заголовком, содержимым и нижним колонтитулом. контент div иногда может содержать много информации, чтобы она помещалась на 1 страницу, поэтому мне нужно создать вторую страницу, если содержимое div переполняется. Каждая страница должна содержать заголовок, содержание и нижний колонтитул. (div содержит номера страниц и подписи, которые должны быть на каждой странице)

. Коллега уже создал файл .php для этого, однако, если есть много данных, нижний колонтитул будет продолжен на следующей странице (говорящий об актуальных страницах формата A4). он сделал все это, сославшись на строки в содержании div. он работает на 2 страницы, но все больше запутано. Поэтому, поскольку я довольно новичок в .php и html, я хотел погрузиться в него и сделать все правильно (обнаруживая переполнение, а затем создавая новую страницу).

Я попытался настройки линии допускается на каждой странице, но в конце концов это просто хак и я знаю, что я могу обнаружить переполнение в некотором роде, но я не могу понять, как сделать все работы

Проблема: подсчет строк в div не является надежным, тем более, что каждый новый кусок данных (пробег, часы, расходы) имеет небольшой заголовок таблицы, который занимает некоторое место на странице. , и хотя я попытался настроить номера строк, в конце, когда документ достигнет большого, заголовок не запустится в верхней части страницы. , поэтому я хочу сделать это более надежным и убедиться, что размеры div не могут измениться, и вся информация отображается (это означает, что данные не скрыты, так как div переполняется).

Вопрос Как начать новую страницу, когда текущее содержимое div переполнено?

Код

<?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 Я сократил мой вопрос значительно и добавил код.

Answer 1

Чтобы определить, переполнен ли контент div, вы можете сравнить его height с scrollHeight. Если он переполнится, scrollHeight будет больше.

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