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

Question

我正在要打印的网页上动态创建元素（学生账单）。我希望这个元素只占印刷媒体总可打印高度的一半，这样我就可以在一页上打印两个元素。

但是在图片中，很明显第三个元素的某些部分出现在第一页上，实际上应该在第二页上。

如何强制这个元素（一个学生的账单）正好占据页面高度的一半？

<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

试试这个

在每第 2 个带有 page-break-after 属性

的元素后添加一个 div

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

page-break-after 属性设置是否在指定元素后出现分页符

DEMO

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

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

html

css

print-css