最近碰到一個需求，需要前端將在一個頁面內呼叫瀏覽器的window.print()方法，列印當前頁面。但是呢，需要將三個DIV分頁列印：

<div style="height:290mm">我是封面</div>
<div style="height:290mm">我是目錄，你不知道我的內容有多長</div>
<div>我是正文，我需要從一個新頁面開始展示</div>

開始我想到的辦法是，將前兩個div的高度設定為 290mm(A4紙的高度)，如上述程式碼。這樣的話，他們正好各佔據一面，正文自動在新頁面開始，但這隻適用於目錄不超過一頁的情況，而且必須是A4紙列印，而且，290mm是A4紙的高度，你不知道使用者會不會設定頁邊距，頁邊距會設定多少。顯然這種方式治標不治本。

後來，我發現可以使用css的 page-break-after:always 來控制在某個DIV之後新開一個頁面，程式碼如下：

<div style="page-break-after:always">我是封面</div>
<div style="page-break-after:always">我是目錄，你不知道我的內容有多長</div>
<div>我是正文，我需要從一個新頁面開始展示</div>

這樣的話，無論div有多長，在它之後一定會新開一個頁面再列印。就避免了計算高度的問題。完美解決我的問題。