Force an element to take exactly half of available height in print media

问题

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>

回答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

来源：https://stackoverflow.com/questions/45626299/force-an-element-to-take-exactly-half-of-available-height-in-print-media