オーバーフローしたときに別のdivにコンテンツを移動する

Question

私は人々が印刷用にPDFファイルをダウンロードできるサイトを構築しようとしています。別のスレッドで、私が望む情報を置いた「新しい」ページを作ってから、「PDFにプリントする」ようにしました。これは、コンテンツをPDFに変換する最も簡単な方法だからです。

私は、正確にA4用紙の幅と高さであるグリッドを持つページを作った。したがって、印刷された場合、内容は完全に適合するはずです。

しかし、私の問題は、グリッド内のコンテンツが人の入力内容に応じて変化することです。

だから、今の私は、次のような状況かもしれない。だから、このページに入る前に https://jsfiddle.net/kfeer7f8/

：

CSS：

<style> 
    * { 
     margin: 0; 
     padding: 0; 
    } 

    .grid { 
     display: grid; 
     grid-template-columns: 1fr; 
     width: 21cm; 
     height: 29.7cm; 
     border: 1px red solid; 
     align-content: start; 
     grid-row-gap: 10px; 
     background: black; 
    } 

    .teams { 
     display: grid; 
     grid-template-columns: 1fr 1fr 1fr; 
     grid-template-areas: 
     "teamNumber roundScore"; 
     background: #ffffff; 
     margin: 10px; 
     padding: 10px; 
     border-radius: 5px;  
    } 

    .teamMember { 
     border-bottom: 2px #474340 solid; 
     padding: 5px 0px 5px 5px; 
     margin: 5px; 
    } 

    .teamNumber { 
     grid-area: teamNumber; 
     text-align: left; 
     grid-column: 1/-1; 
     padding-left: 5px; 
     justify-self: start; 
    } 
</style> 

HTML：

<div class="grid"> 
    <div class="teams"> 
     <p class="teamNumber">Team 1</p> 
     <div class="teamMember">1.</div> 
     <div class="teamMember">2.</div> 
     <div class="teamMember">3.</div> 
     <div class="teamMember">4.</div> 
     <div class="teamMember">5.</div> 
     <div class="teamMember">6.</div> 
     <div class="teamMember">7.</div> 
    </div> 
    <div class="teams"> 
     <p class="teamNumber">Team 2</p> 
     <div class="teamMember">1.</div> 
     <div class="teamMember">2.</div> 
     <div class="teamMember">3.</div> 
     <div class="teamMember">4.</div> 
     <div class="teamMember">5.</div> 
     <div class="teamMember">6.</div> 
     <div class="teamMember">7.</div> 
     <div class="teamMember">8.</div> 
     <div class="teamMember">9.</div> 
     <div class="teamMember">10.</div> 
    </div> 
    <div class="teams"> 
     <p class="teamNumber">Team 3</p> 
     <div class="teamMember">1.</div> 
     <div class="teamMember">2.</div> 
     <div class="teamMember">3.</div> 
     <div class="teamMember">4.</div> 
     <div class="teamMember">5.</div> 
     <div class="teamMember">6.</div> 
     <div class="teamMember">7.</div> 
     <div class="teamMember">8.</div> 
     <div class="teamMember">9.</div> 
     <div class="teamMember">10.</div> 
     <div class="teamMember">11.</div> 
     <div class="teamMember">12.</div> 
     <div class="teamMember">13.</div> 
    </div> 
    <div class="teams"> 
     <p class="teamNumber">Team 4</p> 
     <div class="teamMember">1.</div> 
     <div class="teamMember">2.</div> 
     <div class="teamMember">3.</div> 
     <div class="teamMember">4.</div> 
     <div class="teamMember">5.</div> 
     <div class="teamMember">6.</div> 
     <div class="teamMember">7.</div> 
     <div class="teamMember">8.</div> 
     <div class="teamMember">9.</div> 
     <div class="teamMember">10.</div> 
    </div> 
    <div class="teams"> 
     <p class="teamNumber">Team 5</p> 
     <div class="teamMember">1.</div> 
     <div class="teamMember">2.</div> 
     <div class="teamMember">3.</div> 
     <div class="teamMember">4.</div> 
     <div class="teamMember">5.</div> 
     <div class="teamMember">6.</div> 
     <div class="teamMember">7.</div> 
     <div class="teamMember">8.</div> 
     <div class="teamMember">9.</div> 
     <div class="teamMember">10.</div> 
    </div> 
</div> 

JSFiddleを人は私のシステム/ウェブサイトに5チーム、50人が参加し、5人のチームに分かれています。そして、あなたが結果を見ることができるように、少なくとも私はこの例で使用している書式から、すべてが整列するはずですが、最終的には最後のチームがA4グリッドのサイズをオーバーフローさせます。 そして明らかにこれはランダムです。場合によっては、2つのチームと20人だけがそのグリッドに簡単にフィットすることがあります。しかし、時にはこれ以上にオーバーフローがさらに悪化することさえあります。

私の質問は、javascript/jqueryやその他のグリッド経由でチームを別のグリッド/ A4用紙に置くことができる方法がありますか？以前のグリッドではオーバーフローしますか？

Answer 1

それを追加するためのJavascriptコード。すべてのグリッドがA4サイズの用紙に収まり、グリッドが壊れていないことを確認するだけです。

あなたはこの印刷メディアクエリや改ページを使用して行うことができますに関係なく.team div要素がある限り、それはA4よりも小さいだとして、どのように大型の、そして、

@media print { 
      .teams { 
       page-break-inside: avoid; 
      } 
    } 

： https://www.w3schools.com/cssref/pr_print_pagebi.asp

使用をそれは常にページに収まるでしょう。

Answer 2

申し訳ございません： の場合、@media printクラスをcssに使用して、動的にhtmlに追加することができます。 https://jsfiddle.net/s7fjLt8e/6/

@media print { 
    .pageBreakClass{ 
     page-break-before: always; 
    } 
    } 

私の理解から動的に

var teamArray = [] 
$('.teamMember').each(function(){ 
    teamArray.push($(this)); 
}); 
var i = 30; 
while(teamArray[i]){ 
    teamArray[i].parent().after("<div class='pageBreakClass'>Page Breaks Here</div>"); 
    i += 30; 
}