How to make DIV to bottom of the print page?

Question

I want to add block which should always be at the bottom of web page as well as print page. I achieved that by this code.

For that, I followed this https://stackoverflow.com/a/8825714/6536977 and it's working fine in web page as well as print page, But the only problem is when there are 2 or more than 2 pages in print page, the footer in not placed at the bottom.

Here is my code

.thank_you_message {
        height: 50px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: 0;
        border-top: 1px solid #388acf;
        display: table;
     }
     .thank_you {
        margin: 0 auto;
        max-width: 800px;
        display: table-cell;
  
     }
     .invoice-box {
        max-width: 800px;
        margin: auto;
        position: relative;
        padding-bottom: 60px;
     }
     .invoice-box table {
        width: 100%;
        line-height: inherit;
        text-align: left;
     }
     #holder {
        max-width: 800px;
        margin: auto;
        border: 0.5px solid #ddd;
        box-sizing: border-box;
        min-height: 100%;
        position: relative;
     }
     .invoice-box table tr.top table td.title {
        font-size: 40px;
        line-height: 45px;
        color: #333;
        padding-left: 20px;
     }

     tr.invoice_details td {
        padding-left: 15px;
        padding-right: 0px;
     }
    table { page-break-inside:auto }
     tr{ page-break-inside:avoid; page-break-after:auto }

<div id="holder">
     <div class="invoice-box">
        <div class="invoice_title">Purchase Order</div>
        <table class="invoice-box-table">
           
           <tr class="heading">
              <td>Item</td>
              <td>Packing</td>
              <td>Code</td>
              <td class="qty">Qty</td>
           </tr>
           <tr class="item">
              <td>Website design</td>
              <td>-</td>
              <td>Q-FOIL-LACYS-25-37.5</td>
              <td class="qty"> 1</td>
           </tr>
        </table>
      </div>
     <div class="thank_you_message">
        <div class="thank_you">
           <div style="font-size: 20px;">Thank you for your order, our staff will be attending to you shortly.</div>
        </div>
     </div>
  </div>

This thank you message doesnt go at the end of bottom in printer when there's more than 2 pages

you should add top:100% for thank you div. because sometimes bottom values not taken in all browsers — Ranjith v, Jan 04 '20 at 10:26
https://www.screencast.com/t/ZYBjbvTkeWvb I did, but its showing me like this in printer's 2nd page — Bhakti Thakkar, Jan 04 '20 at 10:59

Ranjith v · Answer 1 · 2020-01-04T11:22:04.010

0

pls try like this. hear i added height your parent div and change border for invoice

css

     .thank_you_message {
        height: 50px;
        width: 100%;
        position: absolute;
        left: 0;
        bottom: -100px;
        border-top: 1px solid #388acf;
        display: table;
     }
     .thank_you {
        margin: 0 auto;
        max-width: 800px;
        display: table-cell;

     }
     .invoice-box {
max-width: 800px;
margin: auto;
position: relative;
padding-bottom: 60px;
border: 0.5px solid
#ddd;
     }
     .invoice-box table {
        width: 100%;
        line-height: inherit;
        text-align: left;
     }
     #holder {
        max-width: 800px;
        margin: auto;
        box-sizing: border-box;
        min-height: 100%;
        position: relative;
     }
     .invoice-box table tr.top table td.title {
        font-size: 40px;
        line-height: 45px;
        color: #333;
        padding-left: 20px;
     }

     tr.invoice_details td {
        padding-left: 15px;
        padding-right: 0px;
     }
    table { page-break-inside:auto }
    tr{ page-break-inside:avoid; page-break-after:auto }

edited Jan 04 '20 at 11:22

answered Jan 04 '20 at 11:04

Ranjith v

1,032
5
15

https://www.screencast.com/t/qsXYEF17B content overlaps when there are lots of fields and also its not working in print page https://www.screencast.com/t/plBJGGpjD – Bhakti Thakkar Jan 04 '20 at 11:11
pls cheack above code.. i changed height of window and thank you message height. now working fine – Ranjith v Jan 04 '20 at 11:15
pls share your link for check this @Bhakti Thakkar – Ranjith v Jan 04 '20 at 11:16
I'm working in local, please check this html code https://www.codepile.net/pile/ma1nODZq – Bhakti Thakkar Jan 04 '20 at 11:22
It's not working in print page https://www.screencast.com/t/6aoyBW6xvXH – Bhakti Thakkar Jan 04 '20 at 11:31
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/205341/discussion-between-bhakti-thakkar-and-ranjith-v). – Bhakti Thakkar Jan 04 '20 at 11:33

score 0 · Answer 2 · answered Jan 04 '20 at 17:19

You can use tfoot in table instead

html,
body {
  height: 100%;
}

.invoice-box {
  max-width: 800px;
  margin: auto;
  position: relative;
}

.invoice-box table {
  width: 100%;
  line-height: inherit;
  text-align: left;
}

#holder {
  max-width: 800px;
  margin: auto;
  box-sizing: border-box;
  min-height: 100%;
  position: relative;

}

.invoice-box table tr.top table td.title {
  font-size: 40px;
  line-height: 45px;
  color: #333;
  padding-left: 20px;
}

tr.invoice_details td {
  padding-left: 15px;
  padding-right: 0px;
}

table {
  page-break-inside: auto
}

tr {
  page-break-inside: avoid;
  page-break-after: auto
}

HTML code something like this

<div id="holder">
  <div class="invoice-box">
   <div class="invoice_title">Purchase Order</div>
   <table class="invoice-box-table">

    <tr class="heading">
      <td>Item</td>
      <td>Packing</td>
      <td>Code</td>
      <td class="qty">Qty</td>
    </tr>
    ........
    <tr class="item">
      <td>Website design</td>
      <td>-</td>
      <td>Q-FOIL-LACYS-25-37.5</td>
      <td class="qty"> 1</td>
    </tr>
    <tfoot>
      <tr>
        <td colspan="4" style="border-top:1px #388acf solid;height:50px">
          <div style="font-size: 20px;">Thank you for your order, our staff will be attending to you shortly.</div>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

I didnt work, I want to display thank message at the bottom of printer page — Bhakti Thakkar, Jan 06 '20 at 10:44

How to make DIV to bottom of the print page?

2 Answers2