首先执行代码即可正常工作。它在每页上显示页脚。但是我希望当内容溢出到页脚时，中断当前页面并添加一个新页面。内容一定不能溢出页脚。
我该如何实现？感谢您的帮助，对于任何语法错误，我们深表歉意。如果发现任何错误，请编辑问题。
@media print {
body {
visibility:hidden;
}
page[size="A4"] > * {
visibility:visible;
}
#footer {
visibility:visible;
display: block !important;
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#000;
padding:8px;
}
}
page {
background: #fff;
display: block;
margin: 0 auto;
margin-bottom: 0.5cm;
box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);
position: relative;
}
page[size="A4"] {
width:21cm;
min-height: 29.7cm;
}
page[size="A4"][layout="portrait"] {
width: 29.7cm;
min-height: 21cm;
}
tr.border_bottom td{
border-bottom: 1px solid #000
}
#footer {
display: none;
}<page size="A4" style="">
<table id="main_table" style="width: 100%;font-size: 14px;font-family: 'Roboto', sans-serif;border: 1px solid #000">
<tbody><tr class="">
<td style="text-align: left;width: 10.5cm;">
<p style="margin-top: 0px; text-transform: uppercase"><b>GSTIN: 24AADFS1191D1ZH <br> PAN: AADFS1191F</b></p>
</td>
<td style="text-align: right;width: 10.5cm;">
<p style="margin-top: 0px; text-transform: uppercase"><b>Original for buyer: white<br>Duplicate for transporter: pink<br>Triplicate for supplier: yellow</b></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;" colspan="2">
<h4 style="text-align: center;font-weight: bold;font-size: 22px;margin: 0">SHRI AMBICA PLASTIC INDUSTRIES</h4>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;" colspan="2">
<p style="text-align: center;font-weight: bold;font-size: 16px;margin: 0">MANUFECTURER OF : HDPE, LDPE, & P.P. SHEETS TILES - TAPE & BOARD</p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;" colspan="2">
<p style="text-align: center;font-size: 14px;margin: 0">O/s Shahpur Gate. Ambica Bhavan, Nr. Fire Brigade, Ahmedabad-380 004. <b>Mobile : 98253 10444, 7878984567</b></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;" colspan="2">
<p style="font-size: 14px;margin: 0"><b>Order No.:</b> <span class="editable Order_no mce-content-body" style="font-weight: bold; position: relative;" id="mce_0" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;" colspan="2">
<h4 style="text-align: center;font-weight: bold;font-size: 22px;margin: 0">EXPORT INVOICE</h4>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;" colspan="2">
<p style="text-align: center;font-size: 14px;margin: 0"><b>Supply Meant For Export Under Bond Or Letter Of Undertaking Without Payment Of Intergrated Tax (IGST)</b></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
<p style="font-weight: bold;font-size: 14px;margin: 0">Invoice No: <span class="editable Invoice_no mce-content-body" style="font-weight: bold; position: relative;" id="mce_2" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
<td style="text-align: left;width: 10.5cm;">
<p style="font-weight: bold;font-size: 14px;margin: 0">Transport Mode: <span class="editable Transport_mode mce-content-body" style="font-weight: bold; position: relative;" id="mce_3" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
<p style="font-weight: bold;font-size: 14px;margin: 0">Invoice Date: <span class="editable Invoice_date mce-content-body" style="font-weight: bold; position: relative;" id="mce_4" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
<td style="text-align: left;width: 10.5cm;">
<p style="font-weight: bold;font-size: 14px;margin: 0">Vehicle No.: <span class="editable Vehicle_no mce-content-body" style="font-weight: bold; position: relative;" id="mce_5" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
<div style="float: left;width: 80%; border-right: 1px solid #000">
<p style="font-weight: bold;font-size: 14px;margin: 0">Reverse Chrage (Y/N): </p>
</div>
<div style="float: left;width: 18%;padding-left: 5px">
<span class="editable Reverse_charge mce-content-body" style="font-weight: bold; position: relative;" id="mce_6" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span>
</div>
</td>
<td style="text-align: left;width: 10.5cm;">
<p style="font-weight: bold;font-size: 14px;margin: 0">Date of Supply: <span class="editable Supply_date mce-content-body" style="font-weight: bold; position: relative;" id="mce_7" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
<div style="float: left;width: 50%; border-right: 1px solid #000">
<p style="font-weight: bold;font-size: 14px;margin: 0">State: <span class="editable State mce-content-body" style="font-weight: bold; position: relative;" id="mce_8" contenteditable="true" spellcheck="false">Gujarat</span></p>
</div>
<div style="float: left;width: 20%; border-right: 1px solid #000">
<p style="font-weight: bold;font-size: 14px;margin: 0 0 0 5px">HSN Code: </p>
</div>
<div style="float: left;width: 28%;padding-left: 5px">
<span class="editable HSN_Code mce-content-body" style="font-weight: bold; position: relative;" id="mce_9" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span>
</div>
</td>
<td style="text-align: left;width: 10.5cm;">
<p style="font-weight: bold;font-size: 14px;margin: 0">Place of Supply: <span class="editable Supply_place mce-content-body" style="font-weight: bold; position: relative;" id="mce_10" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;height: 10px" colspan="2"></td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
<p style="text-align: center;font-weight: bold;font-size: 14px;margin: 0">Bill to party: </p>
</td>
<td style="text-align: left;width: 10.5cm;padding-right: 0px">
<p style="text-align: center;font-weight: bold;font-size: 14px;margin: 0">Ship to party: </p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
<p style="font-weight: bold;font-size: 14px;margin: 0">Name: <span class="editable Bill_name mce-content-body" style="font-weight: bold; position: relative;" id="mce_11" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
<td style="text-align: left;width: 10.5cm;padding-right: 0px">
<p style="font-weight: bold;font-size: 14px;margin: 0">Name: <span class="editable Ship_name mce-content-body" style="font-weight: bold; position: relative;" id="mce_12" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 5px" valign="top">
<p style="font-weight: bold;font-size: 14px;margin: 0;min-height: 40px;text-align: justify;">Address: <span class="editable Bill_address mce-content-body" style="font-weight: bold; position: relative;" id="mce_13" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
<td style="text-align: left;width: 10.5cm;padding-right: 5px" valign="top">
<p style="font-weight: bold;font-size: 14px;margin: 0;min-height: 40px;text-align: justify;">Address: <span class="editable Ship_address mce-content-body" style="font-weight: bold; position: relative;" id="mce_14" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 10.5cm;border-right: 1px solid #000;padding-right: 0px">
<p style="font-weight: bold;font-size: 14px;margin: 0">Country: <span class="editable Bill_country mce-content-body" style="font-weight: bold; position: relative;" id="mce_15" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
<td style="text-align: left;width: 10.5cm;padding-right: 0px">
<p style="font-weight: bold;font-size: 14px;margin: 0">Country: <span class="editable Ship_country mce-content-body" style="font-weight: bold; position: relative;" id="mce_16" contenteditable="true" spellcheck="false"><br data-mce-bogus="1"></span></p>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 21cm;height: 10px" colspan="2"></td>
</tr>
<tr class="">
<td style="text-align: left;width: 21cm;" colspan="2">
<table style="width: 100%" class="item_area">
<tbody><tr class="border_bottom heading_row">
<th style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 0;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">SR. No.</th>
<th style="width: 8.7cm;max-width: 8.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Product Description</th>
<th style="width: 1.8cm;max-width: 1.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">HSN</th>
<th style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">QTY</th>
<th style="width: 1.3cm;max-width: 1.3cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Rate</th>
<th style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Amount</th>
<th style="width: 0.8cm;max-width: 0.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Dis</th>
<th style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Taxable Value</th>
<th style="width: 2.5cm;max-width: 2.5cm;border: solid #000;border-width: 0 0 1px 1px;word-wrap: break-word;font-weight: bold;text-align: center;">
<table style="width: 100%">
<tbody><tr>
<td colspan="2" style="padding: 2px 5px;">IGST</td>
</tr>
<tr>
<td style="width: 0.75cm;max-width: 0.75cm;border-right: 1px solid #000; padding: 1px 2.5px;">Rate</td>
<td style="width: 1.56cm;max-width: 1.46cm;padding: 1px 2.5px;">Amount</td>
</tr>
</tbody></table>
</th>
<th style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Total</th>
</tr>
<tr class="border_bottom total_row">
<td style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 0;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;"></td>
<td style="width: 8.7cm;max-width: 8.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">Total</td>
<td style="width: 1.8cm;max-width: 1.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;"></td>
<td class="Total_Quantity" style="width: 0.7cm;max-width: 0.7cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
<td style="width: 1.3cm;max-width: 1.3cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;"></td>
<td class="Total_Amount" style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
<td class="Total_Discount" style="width: 0.8cm;max-width: 0.8cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
<td class="Total_Taxable" style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
<td style="width: 2.5cm;max-width: 2.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">
<table style="width: 100%">
<tbody><tr>
<td style="width: 0.75cm;max-width: 0.75cm;border-right: 1px solid #000; padding: 1px 2.5px;"></td>
<td class="Total_IGST_Amount" style="width: 1.46cm;max-width: 1.46cm;padding: 1px 2.5px;">00</td>
</tr>
</tbody></table>
</td>
<td class="Total_Total" style="width: 1.5cm;max-width: 1.5cm;border: solid #000;border-width: 0 0 1px 1px;padding: 2px 5px;word-wrap: break-word;font-weight: bold;text-align: center;">00</td>
</tr>
</tbody></table>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 12.6cm;border-right: 1px solid #000;padding-right: 0px">
<p style="text-align: center;font-weight: bold;font-size: 14px;margin: 0">Total Invoice Amount In Word:</p>
</td>
<td style="text-align: left;width: 8.4cm;padding-right: 0px">
<div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Total Amount Before Tax: </p>
</div>
<div style="float: left;width: 25%;padding-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="TABT">00</p>
</div>
</td>
</tr>
<tr>
<td style="text-align: center;width: 12.6cm;border-right: 1px solid #000;padding-right: 0px" rowspan="3">
<span class="amountinword" style="text-align: left;font-weight: bold;font-size: 14px;margin: 0"></span>
</td>
<td style="text-align: left;width: 8.4cm;border: solid #000;border-width: 0 0 1px 0;padding-right: 0px">
<div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Add.: IGST: </p>
</div>
<div style="float: left;width: 25%;padding-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="IGST">00</p>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;width: 8.4cm;border: solid #000;border-width: 0 0 1px 0;padding-right: 0px">
<div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Total Tax Amount: </p>
</div>
<div style="float: left;width: 25%;padding-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="TTA">00</p>
</div>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 8.4cm;padding-right: 0px; border-bottom: 0">
<div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">Total Amount After Tax: </p>
</div>
<div style="float: left;width: 25%;padding-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0" class="TAAT">00</p>
</div>
</td>
</tr>
<tr class="border_bottom">
<td style="text-align: left;width: 12.6cm;padding-right: 0px; border: solid #000; border-width: 1px 1px 0 0">
<table>
<tbody><tr>
<td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
<p style="font-weight: bold;font-size: 14px;margin: 0">Bank : HDFC Bank Ltd.</p>
</td>
<td style="text-align: left;width: 6.3cm;padding-right: 0px;text-align: center;border-bottom: 0" rowspan="4" valign="bottom">
<p style="font-weight: bold;font-size: 14px;padding: 10px 0 10px 0;border-top: 1px solid #000;margin: 0">Common Seal </p>
</td>
</tr>
<tr>
<td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
<p style="font-weight: bold;font-size: 14px;margin: 0">Bank A/C : 50200003685662</p>
</td>
</tr>
<tr>
<td style="text-align: left;width: 6.3cm;padding-right: 0px; border-right: 1px solid #000">
<p style="font-weight: bold;font-size: 14px;margin: 0">Bank IFSC : HDFC0000069</p>
</td>
</tr>
<tr>
<td style="text-align: left;width: 6.3cm;padding-right: 5px; border-right: 1px solid #000;border-bottom: 0">
<p style="font-size: 12px;margin: 10PX 0 10PX 0; text-align: justify;"><b>TERMS:</b> <br> Interest @ 24% p.a. will be charged. if this invoice is not paid by the date. No. complaints in repsect of material supplied wide this invoice will be entertained unless the same is lodged in within 15 days of despatch Subject to Ahmedabad Jurisdiction.</p>
</td>
</tr>
</tbody></table>
</td>
<td style="position: relative; text-align: left;width: 8.4cm;padding-right: 0px; border: solid #000; border-width: 1px 0 0 0" valign="top">
<table style="width: 100%">
<tbody><tr>
<td style="text-align: left;width: 8.4cm;padding-right: 0px">
<div style="float: left;width: 70%; border-right: 1px solid #000; margin-left: 5px">
<p style="text-align: left;font-weight: bold;font-size: 14px;margin: 0">GST On Reverse Charge: </p>
</div>
<div style="float: left;width: 25%;padding-left: 5px">
<span class="editable Reverse_GST mce-content-body" style="text-align: left; font-weight: bold; font-size: 14px; margin: 0px; width: 100%; position: relative;" id="mce_17" contenteditable="true" spellcheck="false">00</span>
</div>
</td>
</tr>
<tr>
<td style="text-align: left;width: 8.4cm;padding-right: 0px;border: none">
<p style="text-align: center;font-size: 12px;margin: 7px 0 0 0">Certified that particular given above is true and correct</p>
<p style="text-align: center;font-size: 16px;margin: 3px 0 0 0">For, <b>SHRI AMBICA PLASTIC INDUSTRIES</b></p>
<p style="position: absolute; bottom: 0; width: 100%; text-align: center;font-size: 14px;margin: 3px 0 0 0">Authorised signatory</p>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
</page>
<div id="footer">
<p style="text-align: center;line-height: 2px;">O/s Shahpur Gate. Ambica Bhavan, Nr. Fire Brigade, Ahmedabad-380 004</p>
<p style="text-align: center;line-height: 2px;">Mobile : 98253 10444, 7878984567</p>
</div>
答案 0 :(得分：0)
解决方案1
尝试添加
{page-break-after: always;}至页脚CSS。
该属性在指定元素后添加分页符。
解决方案2
通过将其添加到您要破坏站点的位置来替代控制打印内容：
<p style="page-break-before: always"></p>
示例 尝试打印时，下面的代码将为您提供三页。
<html>
<body>
This is the text for page #1.
<p style="page-break-before: always"></p>
Page #2...
<p style="page-break-before: always"></p>
Page #3...
</body>
</html>