記入欄を下に固定した印刷物をWebページでそれらしく作成する方法

親要素のdivのボックス内の子要素のdivを下揃えにする方法としては、以下のように記述するをなんとなく知っていました。

<div style="height:1000px;position:relative;">
    親要素
    <div style="position:absolute;bottom:0;">
        子要素
    </div>
</div>

これを繰り返し出力すれば、高さを固定した親要素のdivのボックスが繰り返し出力されます。
親要素のdivのボックス内で子要素のdivは下揃えになります。

<div style="height:1000px;position:relative;">
    親要素1
    <div style="position:absolute;bottom:0;">
        子要素1
    </div>
</div>
<div style="height:1000px;position:relative;">
    親要素2
    <div style="position:absolute;bottom:0;">
        子要素2
    </div>
</div>

photo credit: Martin Pettitt New Printer! via photopin (license)

親要素のdiv毎に改ページして印刷できる？

印刷時の改ページ位置を指定する際に用いる「page-break-after」を適用すると、正しく改ページされるのか試してみました。

<div style="height: 1000px;position: relative;">
    親要素1
    <div style="position: absolute;bottom: 0;">
        子要素1
    </div>
</div>
<hr style="page-break-after: always;">
<div style="height: 1000px;position: relative;">
    親要素2
    <div style="position:absolute;bottom:0;">
        子要素2
    </div>
</div>

結果は、ブラウザでの印刷プレビュー、実際にプリンタを使った印刷ともに親要素のdiv毎に改ページされました。
Google Chromeの印刷機能からのPDF作成でも、親要素のdiv毎に改ページされました。

記入欄を下に固定した印刷物を、Webページで作成してブラウザの印刷機能で作りたいという要望があれば使えそうな方法だと考えます。