CSS print content overflow footer. How to resolve?
Clash Royale CLAN TAG#URR8PPP
CSS print content overflow footer. How to resolve?
First upon code is working properly. It displaying the footer on every page. But I want that when content is overflowing to footer then break current page and add a new page. content must not overflow footer. How can I achieve this? Your help is appreciated and sorry for any grammatical mistake. Please edit the question if you found any mistake.
@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>
1 Answer
1
Solution 1
Try addpage-break-after: always; to e.g. the footer CSS.
page-break-after: always;
The property adds a page-break after a specified element.
Solution 2
Alternative control what you print by adding this to where you want your site to break:
<p style="page-break-before: always"></p>
<p style="page-break-before: always"></p>
EXAMPLE
Below code will give you three pages when you tries to print.
<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>
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.