强制元素恰好占据打印媒体中可用高度的一半

Question

I am dynamically creating elements (student bills) on a web page which I want to print. I want this element to take only half of the total printable height in print media, so that I can print two elements on one page.

But in the picture, It's clear that some part of the third element is appearing on first page, which should actually go on the second page.

How can I force this element (one student's bill) to take exactly half of the height of the page?

<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

Try this

add a div after every 2nd elements with page-break-after property

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

---

page-break-after property sets whether a page break should occur AFTER a specified element

DEMO