Закрепление пользовательского нижнего колонтитула на каждой странице снизу при печати

Я хочу напечатать 30 страниц с некоторыми данными сверху и некоторыми данными внизу. Мой код выглядит так:

<...>



<div style="page-break-after: always">
    <div>This should be on top1</div>
    <div>This should be on bottom1</div>
</div>
<div style="page-break-after: always">
    <div>This should be on top2</div>
    <div>This should be on bottom2</div>
</div>


<etc>

Я пробовал все:

  • Позиции: относительный (без изменений), абсолютный (нижний колонтитул только на первой странице), фиксированный (только на последней странице)
  • Настройка html, body, каждой высоты div до 100%. Нет идеалов, почему я должен это делать. Ничего не изменил

Может быть, есть способ заставить мой браузер (FF) придерживаться div внизу страницы?

ОТВЕТЫ

Ответ 1

Наконец нашел ответ:

  • html, тело ДОЛЖНО ИМЕТЬ высоту: 100%;
  • Должны быть два типа div: внешний (размер страницы), нижний колонтитул
  • Для обоих настроек: block;
  • Для внешней высоты установки: 100%; position: relative;
  • Для внутреннего заданного положения: абсолютное; bottom: 0px;

Voila!

Вот мой полный код:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <style>
        html,body
        {
            height: 100%;
            margin: 0px;
        }
        body > div
        {
            height: 100%;
            display: block;
            position: relative;
        }
        body > div > div
        {
            position: absolute;
            bottom: 0px;
            left: 0px;
        }
    </style>
</head>
<body>
    <div>
        Page1
        <div>Page1Footer</div>
    </div>
    <div>
        Page2
        <div>Page2Footer</div>
    </div>
    <div>
        Page3
        <div>Page3Footer</div>
    </div>
</body>
</html>

Ответ 2

Обновление Я немного поиграл с приведенным выше кодом, и это может работать легче, чем я думал изначально. (Обратите внимание, что существует вероятность того, что нижний колонтитул перекрывает содержимое из предыдущего div, это можно было бы решить, добавив атрибут margin-bottom к содержимому div, равному высоте пользовательских нижних колонтитулов. Кроме того, если содержимое вашей страницы слишком велико между разрывов страниц, это все равно будет иметь несколько сценариев, которые нужно посещать). Все, что сказал, я тестировал на месте, и он работал так, как вам хотелось.

CSS

<style>
@media print{
    .footer{
       position:relative;
       top:-20px; // this sets the footer -20px from the top of the next 
                  //header/page ... 20px above the bottom of target page
                  //so make sure it is more negative than your footer height.

       height:10px;//notice that the top position subtracts 
                   //more than the assigned height of the footer
    }
}
</style>

HTML

<body>
   <div style="page-break-after: always">
      <div>This should be on top1</div>
   </div>
   <div style="page-break-after: always">
      <div class="footer">This should be on bottom of page1</div>
      <div>This should be on top2</div>
   </div>
   <div class="footer">This should be on bottom of page2</div>
</body>

Оригинальный ответ

К сожалению, нет простого способа сделать это. Браузеры не предлагают средства для создания пользовательских верхних и нижних колонтитулов для печати. ​​

Лучше всего разместить нужную информацию на каждой странице в теге заголовка, найденном в <head><title>YOUR COMMON CONTENT</title></head> Это не будет самым красивым. Это сводится к вашим требованиям.

Другой вариант - использовать @media print (CSS) в сочетании с javascript для динамического вычисления и вставки разрывов/пробелов в пробелах при вставке div (ваш пользовательский нижний колонтитул и/или заголовок) в абсолютные позиции для известного формата бумаги, Затем после события печати динамически измените формат назад.

Ответ 3

Это работает для меня

Просто добавьте следующий css в свой html файл

@page {

        margin-bottom: 40px;
        counter-increment: page;

        @bottom-right {
            border-top: 1px solid #000000;
            padding-right:20px;
            font-size: 12px !important;
            content: "Page " counter(page) " of " counter(pages);
        }
        @bottom-left {
            content: "Footer content goes here.";
            border-top: 1px solid #000000;
        }

    }