如何使 DIV 位於打印頁面的底部？

Question

我想添加應該始終位於網頁底部和打印頁面的塊。 我通過這段代碼實現了這一點。

為此，我遵循了這個https://stackoverflow.com/a/8825714/6536977並且它在網頁和打印頁面中都可以正常工作，但唯一的問題是打印頁面中有 2 頁或 2 頁以上時，頁腳未放置在底部。

這是我的代碼

 .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>

當超過 2 頁時，此感謝信息不會出現在打印機底部的末尾

Answer 1

請嘗試這樣。 聽說我為您的父 div 添加了高度並更改了發票的邊框

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 } 

Answer 2

您可以在表格中使用 tfoot

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 代碼是這樣的

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