要素を印刷媒体の高さの半分にする

Question

印刷したいWebページに要素（学生証）を動的に作成しています。 この要素は、印刷メディア内の印刷可能な高さの半分しか使用しないので、1ページに2つの要素を印刷できます。

しかし、写真では、3番目の要素の一部が最初のページに表示されていることは明らかです。実際には2番目のページに移動する必要があります。

この要素（1人の学生の請求書）がページの高さのちょうど半分をとるにはどうすればよいですか？

<div class="col-md-6"> 
    <div id="page-wrap"> 



     <div style="clear:both"></div> 

     <div id="customer"> 

      <div id="customer-title"> 

       <table> 
        <tbody> 
         <tr> 
          <td style="text-align:center"> 
           12017 </td> 
          <td style="text-align:center"> 
           dfsdgf sdgsdg sdgsdg </td> 
          <td style="text-align:center"> 
           1st </td> 
         </tr> 

         <tr> 
          <td style="text-align:center"> 
           32817 </td> 
          <td style="text-align:center"> 
           Sarika Godara </td> 
          <td style="text-align:center"> 
           3rd </td> 
         </tr> 

        </tbody> 
       </table> 


      </div> 

      <table id="meta"> 
       <tbody> 
        <tr> 
         <td class="meta-head">Bill #</td> 
         <td>149</td> 
        </tr> 
        <tr> 

         <td class="meta-head">Date</td> 
         <td id="date">11-08-2017</td> 
        </tr> 
        <!--tr> 
        <td class="meta-head">Amount Due</td> 
        <td><div class="due">Rs.</div></td> 
       </tr--> 

       </tbody> 
      </table> 

     </div> 

     <table id="items"> 

      <tbody> 
       <tr> 
        <th colspan="1">Sr.No.</th> 
        <th colspan="4">Description</th> 
        <th colspan="1">Detail</th> 

        <th colspan="1">Sub-total</th> 
       </tr> 

       <tr> 
        <td colspan="1">1 
        </td> 
        <td colspan="4"> Tuition Fees(upto September) 
        </td> 
        <td colspan="1">2600 + 2750 


        </td> 
        <td colspan="1">5350 
        </td> 
       </tr> 
       <tr> 
        <td colspan="1">2 
        </td> 
        <td colspan="4"> AC 
        </td> 
        <td colspan="1">2450 + 2450 


        </td> 
        <td colspan="1">4900 
        </td> 
       </tr> 
       <tr> 
        <td colspan="1">3 
        </td> 
        <td colspan="4"> Transport Fees(upto September) 
        </td> 
        <td colspan="1">1650 


        </td> 
        <td colspan="1">1650 
        </td> 
       </tr> 




       <tr> 

        <td colspan="2" class="blank"> </td> 
        <td colspan="4" class="total-line">Grand Total</td> 
        <td class="total-value"> 
         <div id="total">Rs. 11900</div> 
        </td> 
       </tr> 
       <tr> 
        <td colspan="2" class="blank"> </td> 
        <td colspan="4" class="total-line">Amount Paid</td> 

        <td class="total-value">Rs. 0</td> 
       </tr> 
       <tr> 
        <td colspan="2" class="blank"> </td> 
        <td colspan="4" class="total-line balance">Balance Due</td> 
        <td class="total-value balance"> 
         <div class="due">Rs. 11900</div> 
        </td> 
       </tr> 

      </tbody> 
     </table> 

     <div id="terms"> 
      <h5>Please Note</h5> आपने अपने बच्चे की फीस पेमेंट में बहुत देर कर दी है. कृपया जल्दी से जल्दी भुगतान करें. 
     </div> 

    </div> 
</div> 

Answer 1

この

がpage-break-afterプロパティを持つすべての第二の要素の後にdiv要素を追加してみ

<div style="page-break-after:always"></div> 

---

page-break-afterプロパティセットwheth請求書フォーマットは、純粋なHTMLである場合は、指定された要素

DEMO