检测 div 溢出并做一些事情[关闭]

Question

场景： 我需要从网页创建一个 .pdf 文件。这个网页构造了一个带有页眉、内容和页脚 div 的 A4 大小的页面。内容 div 有时可能包含太多信息以适合 1 页，因此如果内容 div 溢出，我需要创建第二页。每个页面都需要包含页眉、内容和页脚 div。 （div 包含页码和签名，需要在每一页上）

一位同事已经创建了一个 .php 文件来执行此操作，但是如果有太多数据，页脚 div 将在下一页继续（谈论实际 A4 大小的页面）。他通过计算内容 div 中的行数来完成所有这些工作。它适用于 2 页，但一切都搞砸了。因此，由于我对 .php 和 html 很陌生，所以我想深入研究它并以正确的方式做事（检测溢出，然后制作新页面）。

我已经尝试调整每个页面上允许的行，但最后它只是一个 hack，我知道我可以通过某种方式检测到溢出，但我不知道如何使一切正常

问题： 计算 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

编辑 我已经大大缩短了我的问题并添加了代码。

Answer 1

要检测 div 的内容是否溢出，您可以将其 height 与 scrollHeight 进行比较。如果溢出，scrollHeight 会更大。

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