块在打印页面的底部 html css

Question

I have this page in JSFile : My test case

.qr-bill {
    box-sizing: border-box;
    width: 210mm;
    height: 105mm;
    font-family: Arial, Frutiger, Helvetica, "Liberation Sans";
    border-collapse: collapse;
    color: #000;
    page-break-after: always;
    page-break-inside: avoid;
}

When I print my page, I would like to have any of div bloc .qr-bill that need to showed at the bottom of the current page... I can't success to do it with position... Do you have any idea how to do that ?

Thank you

Answer 1

Give it a position of fixed and bottom of 0 for it to appear at the bottom of every page that is printed. If you want the page to look different when printed, provide a media query like this:

@media print {
  .qr-bill {
    position: fixed;
    bottom: 0;
  }
}