Напечатать нижний колонтитул таблицы в самом низу на последней странице

Question

Напечатать нижний колонтитул таблицы в самом низу на последней странице

Я использую таблицу для создания нижнего колонтитула на каждой странице (работает в Firefox, этого достаточно).

JS Fiddle: https://jsfiddle.net/j9k2xzze/

(щелкните правой кнопкой мыши на панели вывода -> Этот фрейм -> Открыть фрейм в новой вкладке. Затем предварительный просмотр будет работать как обычно)

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

Но на самой последней странице нижний колонтитул таблицы отображается непосредственно под текстом. Если текст короче последней страницы, нижний колонтитул прилипает к нему.

Мне нравится, чтобы нижний колонтитул был в самом низу на последней странице. К сожалению, расширение @page не работает в Firefox, или я делаю это неправильно:

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}

24

html css firefox html-table print-css

Источник

user1494794 31 окт '15 в 06:43

3 ответа

Решение

Невозможно иметь нижний колонтитул только на последней странице, если вы используете абсолютную или фиксированную позицию. Если вы хотите, чтобы нижний колонтитул находился внизу, только если страница недостаточно длинная, используйте метод закрепления нижнего колонтитула, который не требует абсолютного / фиксированного положения. Что-то вроде этого

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

Если вам действительно нужен нижний колонтитул внизу каждой страницы, я бы рекомендовал сначала сгенерировать pdf и распечатать его. Если вам нужно распечатать сложные вещи, вы все равно будете в первую очередь генерировать pdf, print css очень ограничена.

0

Источник

user763948 11 янв '19 в 21:40

Это забавный вопрос, никогда не сталкивался / нуждался в этом, поэтому я тоже узнал что-то новое. Но вот мое рабочее решение вкратце (вы были довольно близки):

С #wrapper { position: relative }, #header, #footer а также #content{ position: absolute } и дополнительные правила расположения и высоты вашего CSS (HTML без изменений), вы полностью контролируете макет. Ваш код может выглядеть примерно так:

Фрагмент ниже, jsFiddle: выходной кадр скрипки и скрипки

html,body { height: 100%; width: 100%; overflow: hidden }

#wrapper {
    position: relative;
    height: 95%; width: 100%;
}
#wrapper #header {
    position: absolute;
    top: 0;
    height: 100px;
}
#wrapper #content {
    position: absolute;
    top: 100px;
}
#wrapper #footer {
    position: absolute;
    bottom: 0;
}

@media print {
    h1 {
      page-break-before: always;
    }

    @page {
      size: A4;
      margin: 0;
    }
}

<table id="wrapper">
    <thead>
    <tr>
        <td id="header">HEADER TEXT</td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="https://unsplash.it/200?image=031" />
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            Welcome
            <h1>NEXT PAGE</h1>
            just one line
        </td>
    </tr>
    </tbody>
    
</table>

-2

Источник

user2015909 11 ноя '15 в 01:18

Привет, я только что добавил следующий медиа-запрос в ваш CSS. И это работает

@media print {
 #footer {
    position: absolute;
    bottom: 0;
  }
}

Проверьте следующую скрипку

https://jsfiddle.net/jjsqgaza/

-3

Источник

user2006386 12 ноя '15 в 08:45

Другие вопросы по тегам html css firefox html-table print-css

user2759272 11 ноя '15 в 00:16 2015-11-11 00:16 · Accepted Answer · 2015-11-11 00:16

Если вы поддерживаете только Firefox, это действительно очень просто (перейдите к редактированию, чтобы увидеть технику, которая также работает в IE, но менее универсальна). Просто добавьте большое нижнее поле в конце вашего контента. Он должен быть достаточно большим, чтобы гарантированно проходить через конец страницы. Браузер предполагает, что вы не хотите печатать пустую страницу в конце вашего документа, поэтому он обрезает столько полей, сколько необходимо, чтобы избежать этого, оставляя только то, что нужно, чтобы нижний колонтитул переместился вниз страницы.

Вы можете поместить поле на псевдоэлемент, чтобы сохранить HTML в чистоте, и вы можете использовать @media print чтобы он не отображался на экране.

Вот код Чтобы увидеть, как он работает в Firefox, откройте этот jsfiddle, щелкните правой кнопкой мыши на выводе, выберите "Этот кадр"> "Показать только этот кадр" и выполните предварительный просмотр.

@media print {
  #content:after {
    display: block;
    content: "";
    margin-bottom: 594mm; /* must be larger than largest paper size you support */
  }
}

<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>PAGE FOOTER</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td id="content">
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

Эта техника не работает ни в одном браузере, кроме Firefox. В IE, когда разрыв страницы происходит в пределах вертикального поля, все поле удаляется - что на самом деле является правильным поведением в соответствии с W3C (раздел 13.3.3)- но не волнуйтесь, поведение Firefox фактически идентично, за исключением когда есть нижний колонтитул таблицы, и в этом случае это на самом деле лучше, поэтому я сомневаюсь, что это когда-нибудь изменится.

Chrome и другие браузеры Webkit (Safari, Opera) даже не поддерживают повторяющиеся нижние колонтитулы, поэтому они не имеют значения. Думаю, я не проверял этот подход в Edge, но я уверен, что он не сработает.

РЕДАКТИРОВАТЬ

Есть еще один вариант, который работает как в Firefox, так и в IE. Все, что вам нужно сделать, это поместить нижний колонтитул в отдельный <div> и закрепите его в нижней части страницы, а затем используйте повторяющиеся <tfoot> как проставка. Этот подход имеет некоторые незначительные недостатки (подробности ниже).

Вот код Чтобы увидеть, как он работает в Firefox, откройте этот jsfiddle, щелкните правой кнопкой мыши на выводе, выберите "Этот кадр"> "Показать только этот кадр" и выполните предварительный просмотр. В IE нажмите на выходной кадр, нажмите CTRL+A, сделайте предварительный просмотр и измените "Как выложено на экране" на "Как выбрано на экране".

@media print {
  #spacer {height: 2em;} /* height of footer + a little extra */
  #footer {
    position: fixed;
    bottom: 0;
  }
}

<table>
  <thead>
    <tr>
      <th>PAGE HEADER</th>
    </tr>
  <thead>
  <tfoot>
    <tr>
      <td id="spacer"></td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content<br>
        content<br>content<br>content<br>content<br>content<br>content<br>content
      </td>
    </tr>
  </tbody>
</table>

<div id="footer">
  PAGE FOOTER
</div>

Основным ограничением этого метода является то, что он помещает одинаковый нижний колонтитул на каждую страницу задания печати, а это означает, что у вас не может быть страниц с другим нижним колонтитулом или без нижнего колонтитула. Кроме того, поскольку высота проставки зависит от высоты нижнего колонтитула, вам придется отрегулировать ее, если высота нижнего колонтитула когда-либо изменится.