根据高度将数据拆分成页面（创建可打印的歌曲书）

Question

我正在尝试制作一本歌曲书，例如。生日，婚礼等，你选择几首歌曲，然后歌曲将在网站上以A5纸张的大小显示，用户可以在那里编辑一些文字，然后再将其转换为PDF。目前我为每首歌创建了一个新页面，但我想填写尽可能多的空间。每页有一首以上的歌曲，或者至少在同一页面上有另一首歌的一些经文，并在下一页上显示其余部分。

A5 size
Height: 793.7px
Width:  559.3px

<div class="songpage currentpage">
     <h4>Song #1</h4>
     <div class="verse">
              <table>
                    <tr>
                        <td>
                            <p>1 - Lipsum Lipsum</p>
                            <p>2 - Lipsum Lipsum</p>
                            <p>3 - Lipsum Lipsum</p>
                            <p>4 - Lipsum Lipsum</p>
                            <p>5 - Lipsum Lipsum</p>
                        </td>
                        <td>
                            <p>6 - Lipsum Lipsum</p>
                            <p>7 - Lipsum Lipsum</p>
                            <p>8 - Lipsum Lipsum</p>
                            <p>9 - Lipsum Lipsum</p>
                        </td>
                    </tr>
                </table>
     </div>

     <h4>Song #2</h4>
     <div class="verse">
              <table>
                    <tr>
                        <td>
                            <p>1 - Lipsum Lipsum</p>
                            <p>2 - Lipsum Lipsum</p>
                            <p>3 - Lipsum Lipsum</p>
                            <p>4 - Lipsum Lipsum</p>
                            <p>5 - Lipsum Lipsum</p>
                        </td>
                        <td>
                            <p>6 - Lipsum Lipsum</p>
                            <p>7 - Lipsum Lipsum</p>
                            <p>8 - Lipsum Lipsum</p>
                            <p>9 - Lipsum Lipsum</p>
                        </td>
                    </tr>
                </table>
     </div>
</div>

The green line indicates where the song should be split up and continue on next page.


Lets say that
<h4> = 60px height
<p>  = 90px height

当达到最大高度时，如何检查元素高度并将其拆分为新页面（关闭标记并创建新的div.songpage）。最大高度为793.7px。

如果有人可以提供某种形式的例子或指导我朝着正确的方向 - 我会很感激的！