блок внизу печатной страницы html css

Question

У меня есть эта страница в JSFile: Мой тестовый пример

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

Когда я распечатываю свою страницу, я хотел бы иметь любой файл div blo c .qr-bill это нужно показать внизу текущей страницы ... Я не могу сделать это с позицией ... У вас есть идеи, как это сделать?

Спасибо

Answer 1

Задайте для него позицию fixed и нижнюю часть 0, чтобы он отображался внизу каждой напечатанной страницы. Если вы хотите, чтобы страница при печати выглядела по-другому, предоставьте медиа-запрос, подобный следующему:

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