ページ上に完全なDIVのみを印刷する

Question

私は約20divsのページがあります。 私がしたいのは次のようなページを印刷することです：

• 4 divsは1ページに完全に表示されます。
• 5桁目の最初の半分がページ1に印刷され、残りの半分が2ページに印刷されます。
• この20桁すべてのリピート。
• に最初の4つのdivがあり、 div 5と1で始まる2番目のページがあります。

したがって、印刷された各ページには完全なdivのみが含まれます。 divの高さもわかりません。 1ページに1つまたは7つの完全なdivが存在する可能性があります。

編集：私はすべてのページ・ブレーク前と改ページ内のオプション

を試してみた

Answer 1

あなたが望む正確な方法それを行うことはできませんCSS。これを行うには、紙サイズのような情報が必要です。 page-break-insideはあなたができる最高ですが、それは保証ではありません。

Answer 2

は試してみてくださいpage-break-inside property：

div { 
    page-break-inside: avoid; 
} 

Answer 3

JavaScriptと一緒にハッキングされることがあります。各divのoffsetHeightとoffsetTopを測定し、それを各ページの予想高さ（ピクセル）と比較することができます。正確にするには別のページの高さで試してみる必要がありますが、次のようなものがうまくいくかもしれません：

function paginateDivs() { 

    var pageHeight = 800; // Experiment with different values here, this 
          // is 800 pixels. 
    var lastPage = 0; 

    var divs = document.getElementsByTagName("div"); 

    for (var i = 0; i < divs.length; i++) { 
     var divBottom = divs[i].offsetTop + divs[i].offsetHeight; 
     if (divBottom - lastPage > pageHeight) { 
      lastPage = divs[i].offsetTop; 
      divs[i].style.pageBreakBefore = "always"; 
     } 
    } 
}