Как использовать HTML для печати верхнего и нижнего колонтитула на каждой напечатанной странице документа?

Можно ли печатать HTML-страницы с пользовательскими колонтитулами на каждой печатной странице?

Я хотел бы добавить слово «НЕКЛАССИФИЦИРОВАННЫЙ» красным, Arial, размером 16pt в верх и низ каждой печатной страницы, независимо от содержимого.

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

Кто-нибудь знает, возможно ли это с помощью HTML / CSS?

1.09.2009 06:38:42
Это вопрос, на который я пытаюсь ответить долгое время. Похоже, что ключом к проблеме были бы css-элементы, такие как страница, верхний центр, контент, позиция: работа (..). Как это могло бы выглядеть, если бы браузеры полностью поддерживали @page: techrepublic.com/blog/webmaster/… alistapart.com/articles/boom alistapart.com/articles/building-books-with-css3 Некоторые открытые проблемы: code.google.com / p / chromium / Issues / Detail
Daniel 29.11.2012 01:54:55
Я отправил Chrome-совместимые решения здесь , что добавит бегущий заголовок к документам , которые не содержат чрезмерно большие пространства текста. Тем не менее, пока нет решения для нижних колонтитулов.
DoctorDestructo 17.09.2014 00:35:02
Combinative Решение : как pisition: fixedи thead tbody tfootметоды имеют свои недостатки , так что вы должны объединить их, далее здесь .
Mohammad Musavi 15.04.2019 05:25:11
16 ОТВЕТОВ

Вы хотите печатать только это? Вы можете добавить его на каждую страницу вашего сайта и использовать CSS, чтобы определить тег как носитель только для печати.

В качестве примера это может быть пример заголовка:

<span class="printspan">UNCLASSIFIED</span>

И в вашем CSS, сделайте что-то вроде этого:

<style type="text/css" media="screen">
    .printspan
    {
        display: none;
    }
</style>
<style type="text/css" media="print">
    .printspan
    {
        display: inline;
        font-family: Arial, sans-serif;
        font-size: 16 pt;
        color: red;
    }
</style>

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

Редактировать:

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

Я оставляю это здесь в случае, если это все же полезно.

0
30.07.2012 15:54:24
+1 для использования дисплея, а не видимости - видимость: скрытый оставляет зарезервированное пространство, тогда как дисплей: ни один не разрушает пустое пространство, экономит бумагу и заставляет планету Земля выживать дольше.
Fenton 1.09.2009 07:29:27
-1: хотя это хороший пример таблицы стилей печати, она не имеет отношения к проблеме, когда содержимое переполняет страницу. Таким образом, нижний колонтитул будет отображаться только на последней странице.
NotMe 24.09.2010 19:13:47

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

Например:

<div class="divFooter">UNCLASSIFIED</div>

CSS:

@media screen {
  div.divFooter {
    display: none;
  }
}
@media print {
  div.divFooter {
    position: fixed;
    bottom: 0;
  }
}
353
7.10.2016 09:58:39
Кажется, не работает, если у вас есть элемент, который занимает две страницы (предварительно в моем случае) - нижний колонтитул будет перезаписан на нем.
Benjol 13.04.2011 11:20:22
Кажется, что браузеры WebKit не поддерживают это должным образом. Поправь меня, если я ошибаюсь!
Gregg Lind 10.08.2011 00:49:53
Это не повторяется на каждой странице.
Tyson of the Northwest 18.08.2011 22:05:36
Это не сработало для меня, я использую Chrome 15.0. Все, что он делает - это печатает элемент там, где он будет на экране, например, в середине страницы, если это то, где я прокручивал. Это конечно не печатает на каждой странице.
chharvey 6.12.2011 10:11:54
Я проверил это на Firefox и Chrome. На Firefox это решение работает, на Chrome нет.
Jaro 29.05.2013 07:47:50

Я считаю, что правильный ответ заключается в том, что HTML 5 и CSS3 не поддерживают печать верхних и нижних колонтитулов в printсредствах массовой информации.

И хотя вы можете смоделировать это с:

  • таблицы
  • блоки с фиксированным положением

у каждого из них есть ошибки, которые мешают им быть идеальным общим решением.

128
28.09.2019 20:40:32
Не верь другим ответам. Они могут работать для особых случаев, но в целом просто ужасно сломаются. Надежного решения не существует, пока в основных браузерах не будут реализованы поля @page. См: en.wikipedia.org/wiki/...
user2847643 5.12.2014 19:50:42
К сожалению, я должен поддержать это. Даже несмотря на то, что у нас 2018 год ... почему, черт возьми, они не дают нам @footerс собой content:"stuff"или тому подобное.
Kai Noack 14.01.2018 17:00:48
На самом деле в W3C есть спецификация для решения этих сценариев.
Mendy 15.01.2019 17:35:24
Я думаю, что это лучший ответ. Проблема заключается в поставщиках браузеров. Вы можете создавать привлекательные PDF-файлы вне браузера с помощью CSS Paged Media с помощью коммерческих инструментов, подобных этим (и другим): Antenna House satellitehouse.com/formatter , Prince princexml.com .
markg 9.09.2019 01:28:04
Я делаю это как комментарий, а не как ответ, поэтому, пожалуйста, не ударяйте меня «ОП не спрашивал ...». Одной из возможностей является использование генератора PDF, который позволяет устанавливать фиксированные верхние и нижние колонтитулы и отображать представление в этом формате, когда пользователь решает, что ему нужен настоящий «предварительный просмотр» или печатный документ. HTML предназначен для рендеринга экрана, а на экранах отсутствует концепция страниц. PDF также может означать формат печатного документа (я знаю, что нет) и является модальностью, где верхние и нижние колонтитулы страницы имеют значение. NReco.PdfGenerator очень доступен для деловых целей или бесплатно.
Newclique 18.02.2020 17:34:54

Я пытался бороться с этим бесполезным сражением, комбинируя правила tfoot и css, но это работало только на Firefox :(. При использовании простого CSS содержимое передается через нижний колонтитул. При использовании tfoot нижний колонтитул на последней странице не остается красиво внизу Это потому, что нижние колонтитулы предназначены для таблиц, а не для физических страниц. Протестировано в Chrome 16, Opera 11, Firefox 3 & 6 и IE6.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Header & Footer test</title>

<style>

  @media screen {
    div#footer_wrapper {
      display: none;
    }
  }

  @media print {
    tfoot { visibility: hidden; }

    div#footer_wrapper {
      margin: 0px 2px 0px 7px;
      position: fixed;
      bottom: 0;
    }

    div#footer_content {
      font-weight: bold;
    }
  }

</style>
</head>

<body>

<div id="footer_wrapper">
  <div id="footer_content">
    Total 4923
  </div>
</div>


<TABLE CELLPADDING=6>

<THEAD>
<TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH> </TR>
</THEAD>

<TBODY>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
<TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD>  <TD>639</TD>  </TR>
<TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD>  </TR>
<TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD>   <TD>1135</TD> </TR>
<TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD>   <TD>1002</TD> </TR>
<TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD>   <TD>908</TD>  </TR>
<TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD>  </TR>
<TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD>   <TD>272</TD>  </TR>
</TBODY>

<TFOOT id="table_footer">
<TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR>
</TFOOT>

</TABLE>

</body>
</html>
5
31.01.2012 13:56:43

Используйте разрывы страниц для определения стилей в CSS:

@media all
  {
  #page-one, .footer, .page-break { display:none; }
  }

@media print
  {
  #page-one, .footer, .page-break   
    { 
    display: block;
    color:red; 
    font-family:Arial; 
    font-size: 16px; 
    text-transform: uppercase; 
    }
  .page-break
    {
    page-break-before:always;
    } 
}

Затем добавьте разметку в документ в соответствующих местах:

<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>

Ссылки

11
23.05.2017 11:55:13
Это не печатает верхний и нижний колонтитулы на каждой странице. Он определяет множество «страниц» с наилучшим предположением. Если вы не знаете высоту документа (количество страниц), это бесполезно.
rainabba 18.01.2014 00:52:15
@rainabbaif the document was printed onto 5 pages
Paul Sweatte 21.01.2014 18:18:55
это был просто пример. не следует использовать для точного руководства вашим ответом.
igorsantos07 5.10.2016 23:48:37
@ igorsantos07 shouldне значит don't. If(просто пример) слово if(просто пример) используется OP, и if(просто пример) OP больше не активен, лучше предоставить конкретный ответ if(просто пример), уже есть общие ответы и if(только пример) языки (HTML / CSS) и рассматриваемые спецификации предназначены для того, чтобы избежать косвенного обращения и упростить документирование ? If(просто пример) так почему? Иначе почему бы и нет?
Paul Sweatte 6.10.2016 01:19:09

Из этого вопроса - добавьте следующие стили в таблицу стилей только для печати. Это решение будет работать в IE и Firefox, но не в Chrome ( начиная с версии 21):

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}
11
23.05.2017 11:47:34
Я нашел это решение только работающим. Не протестировал все браузеры, но он работает в Firefox!
Primoz Rome 14.02.2013 13:41:32
2017 и до сих пор не работает в Chrome! но работает в Firefox
Mehdi Dehghani 16.01.2017 11:34:14
@MehdiDehghani: мой плохой ..
Fr0zenFyr 26.05.2017 10:51:52

Если вы можете использовать javascipt, сделайте так, чтобы клиент обрабатывал содержимое, используя javascript, для размещения элементов на основе доступного пространства.

Вы можете использовать плагин jquery columnizer для динамического размещения вашего контента в блоках фиксированного размера и позиционирования верхних и нижних колонтитулов как части процедуры рендеринга. http://welcome.totheinter.net/columnizer-jquery-plugin/

Смотрите пример 10 http://welcome.totheinter.net/autocolumn/sample10.html

Браузер по-прежнему будет добавлять свои собственные верхние или нижние колонтитулы, если они включены в ОС. Согласованная разметка между платформами и браузерами, вероятно, потребует условного CSS.

3
3.04.2013 04:20:42
Прилагаемая демонстрация даже не работает (страницы не ломаются, не перетекают друг на друга и т. Д.), Не говоря уже о более универсальном контенте.
rainabba 18.01.2014 01:13:00
Я должен был уточнить. Предоставленные ссылки являются примерами библиотеки javascript для размещения содержимого в контейнерах и не предназначены для печати. Эта ссылка должна была служить примером использования js для размещения содержимого в указанных границах. Я использовал js как движок рендеринга с wkhtmltopdf для создания кулинарных книг из содержимого базы данных.
sparkalow 13.03.2014 15:43:41
Вопрос о печати.
Greg Blass 13.09.2017 19:26:37

Я годами искал решение и нашел этот пост о том, как напечатать нижний колонтитул, который работает на нескольких страницах без наложения содержимого страницы.

Моим требованием был IE8, поэтому я обнаружил, что это не работает в Chrome. [ обновление ] По состоянию на 1 марта 2018 года он работает и в Chrome

В этом примере используются таблицы и элемент tfoot путем установки стиля css:

tfoot {display: table-footer-group;}
16
1.03.2018 13:10:02
это работает во всех браузерах и в asp (который имеет некоторые сумасшедшие проблемы с нижними колонтитулами).
DWolf 24.07.2013 15:34:25
@DWolf Первый комментарий дает мне огромную надежду. И вы уничтожите меня в одном предложении сразу после этого.
C0ZEN 24.02.2016 14:19:41
У меня на самом деле была эта работа в Chrome. У меня не было его работы в очень старой версии Chromium на основе Linux, но Chrome работал просто замечательно.
njfife 24.10.2016 20:34:04
С 2019 года он работает в Chrome!
Oleg 8.10.2019 10:23:13

Если вы используете шаблонизатор, такой как Asp.net Razor Engine или Angular, я думаю, что вы должны заново сгенерировать свою страницу и разбить страницу на несколько страниц, а затем вы можете свободно разметить каждую страницу и поместить верхний и нижний колонтитулы в тему. один пример может быть как ниже:

@page {
  size: A4;  
   margin: .9cm;
}


@media print {

   body.print-paper-a4 {
    width: 210mm;
    height: 297mm;
  }

   body {
       background: white;
       margin: 0;
       padding: 0;
   }

   .print-stage,
   .no-print {
       display: none;
   }


   body.print-paper.a4 .print-paper {
      width: 210mm;
        height: 297mm;
    }

   .print-paper {
       page-break-after: always;
       margin: 0;
       padding: .8cm;
       border:none;
       overflow: hidden;
   }

}





.print-papers {
    display: block;
    z-index: 2000;
    margin: auto;

}


body.print-paper-a4 .print-paper {
    width: 21cm;
    height:27cm;
}


.print-paper {
    margin: auto;
    background: white;
    border: 1px dotted black;
    box-sizing: border-box;
    margin: 1cm auto;
    padding: .8cm;
       overflow: hidden;   
}


body.print-mode .no-print-preview {
    display: none;
}

body.print-mode .print-preview {
    display: block;
}
<body class="print-mode print-paper-a4">
        
        <div class="print-papers print-preview">
            <div class="print-paper">
                <div style="font-size: 5cm">
                    HELLO
                </div>

            </div>
            <div class="print-paper">
              <div class="page-header">
                </div>
              
              
            </div>
            <div class="print-paper">
                
                

            </div>            
        </div>
  </body>

0
7.05.2015 17:12:17

Я потратил лучшую половину своего дня, придумывая решение, которое действительно работало бы для меня, и думал, что поделюсь тем, что я сделал. Проблема с вышеупомянутыми решениями заключалась в том, что все мои элементы абзаца перекрывались с нижним колонтитулом, который я хотел внизу страницы. Чтобы обойти это, я использовал следующий CSS:

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}

page-break-insideДля pи content-blockимеет решающее значение для меня. Каждый раз, когда у меня есть pподписка h*, я оборачиваю их обоих, div class = "content-block">чтобы они оставались вместе и не ломались.

Я надеюсь, что кто-то найдет это полезным, потому что мне потребовалось около 3 часов, чтобы понять (я также новичок в CSS / HTML, так что это ...)

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

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

footer {
  font-size: 9px;
  color: #f00;
  text-align: center;
}

@page {
  size: A4;
  margin: 11mm 17mm 17mm 17mm;
}

@media print {
  footer {
    position: fixed;
    bottom: 0;
  }

  .content-block, p {
    page-break-inside: avoid;
  }

  html, body {
    width: 210mm;
    height: 297mm;
  }
}
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <h1>
      Example Document
    </h1>
    <div>
      <p>
        This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
      </p>
    </div>
    <div>
      <h3>
        Example Section I
      </h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
        
        Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
        
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
        
        Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
      </p>
    </div>
    <div class="content-block">
      <h3>Example Section II</h3>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
        
        Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
      </p>
    </div>
    <footer>
      This is the text that goes at the bottom of every page.
    </footer>
  </body>
</html>

70
18.10.2018 10:25:19
Спасибо за это, я только хотел, чтобы в ответе был образец HTML-документа, чтобы было легче.
Eric Kigathi 14.04.2017 15:29:20
@EricKigathi отметил. Я сделаю все возможное, чтобы добраться до этого в эти выходные и отредактировать мой ответ.
brittenb 14.04.2017 17:12:14
@EricKigathi Пропустил крайний срок моих выходных, но я добавил пример HTML-кода. Надеюсь, это поможет!
brittenb 19.04.2017 12:30:30
Спасибо @brittenb - очень признателен, вы прощены за то, что пропустили крайний срок; )
Eric Kigathi 19.04.2017 15:34:30
не работает для второй страницы для заголовка. все еще перекрываются
Fei Xue - MSFT 4.05.2018 12:24:15

Один из подходов, который работает только для добавления заголовков на каждую страницу, заключается в том, чтобы заключить содержимое в a, <table>а затем поместить содержимое заголовка в <thead>тег, а содержимое - в <tbody>тег следующим образом:

<table>
  <thead>
    <tr>
      <th>This content appears on every page</th>
    </tr>
   </thead>
   <tbody>
     <tr>
       <td>Put all your content here, it can span multiple pages and your header will show up at the top of each page</td>
     </tr>
   </tbody>
 </table>

Это работает в Chrome, не уверен на 100% о других браузерах.

4
16.01.2017 19:38:10
это работает до тех пор, пока наш thead и tfoot не имеют много строк <tr>, похоже, что thead и tfoot имеют набор максимальной высоты, в моем случае у меня было 9 строк <tr> в thead, когда я уменьшил его до 3 или 5 это работает
Sundara Prabu 1.03.2018 11:50:16
Это ловкий трюк! Thead работает как шарм, но tfoot нет. Есть идеи, как заставить это работать?
Irikos 15.11.2018 14:05:52
Tfoot работает в браузерах, но не в MS Word. Thead работает в обоих.
Irikos 15.11.2018 14:36:48

Основываясь на каком-то посте, я думаю, что position: fixedработает для меня.

body {
  background: #eaeaed;
  -webkit-print-color-adjust: exact;
}

.my-footer {
  background: #2db34a;
  bottom: 0;
  left: 0;
  position: fixed;
  right: 0;
}

.my-header {
  background: red;
  top: 0;
  left: 0;
  position: fixed;
  right: 0;
}
<html>

<head>
  <meta charset=utf-8 />
  <title>Header & Footer</title>

</head>

<body>
  <div>
    <div class="my-header">Fixed Header</div>
    <div class="my-footer">Fixed Footer</div>
    <table>
      <thead>
        <tr>
          <th>TH 1</th>
          <th>TH 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        </tr>
        <tr>
          <td>TD 1</td>
          <td>TD 2</td>
        
  
-2
9.07.2018 15:29:58
Да, верхние и нижние колонтитулы печатаются на каждой странице, но они перекрывают содержимое страницы.
Tony 4.03.2017 09:41:19

Волшебное решение - положить все вещи в один стол.

  • thead : это для повторного заголовка.

  • tfoot : повторный нижний колонтитул.

  • tbody : содержание.

и сделать один тр, тд и положить все в дел

КОД ::

<table class="report-container">
   <thead class="report-header">
     <tr>
        <th class="report-header-cell">
           <div class="header-info">
            ...
           </div>
         </th>
      </tr>
    </thead>
    <tfoot class="report-footer">
      <tr>
         <td class="report-footer-cell">
           <div class="footer-info">
           ...
           </div>
          </td>
      </tr>
    </tfoot>
    <tbody class="report-content">
      <tr>
         <td class="report-content-cell">
            <div class="main">
            ...
            </div>
          </td>
       </tr>
     </tbody>
</table>

table.report-container {
    page-break-after:always;
}
thead.report-header {
    display:table-header-group;
}
tfoot.report-footer {
    display:table-footer-group;
} 

дополнительно : для предотвращения наложения на несколько страниц. подобно:

<div class="main">
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
    <div class="article">
        ...
  </div>
  ...
  ...
  ...
</div>

что приводит к переполнению, которое заставляет вещи перекрываться с заголовком внутри разрывов страниц.

так >> используйте: page-break-inside: avoid !important;с этим классом article.

table.report-container div.article {
    page-break-inside: avoid;
}

довольно просто, надеюсь, это даст вам лучший результат, который вы хотите.

наилучшие пожелания. ;)

источник ..

11
16.07.2018 22:54:47
Лучшее решение здесь. Несколько замечаний: Flexbox может вызвать непредвиденное поведение. Если вы хотите, чтобы нижний колонтитул на странице lsat был нижним, вам понадобится это решение и решение из @Infotekka вместе.
Arseniy-II 9.09.2019 10:17:17

Я нашел одно решение. Основная идея состоит в том, чтобы создать таблицу и в разделе thead поместить данные заголовка в tr и силой css, чтобы показать, что tr только при печати, а не на экране, тогда ваш обычный заголовок должен быть принудительно отображен только на экране, а не в печати. 100% работает на многих страницах печати. пример кода здесь

<style> 
    @media screen {
        .only_print{
            display:none;
        }
    }
    @media print {
        .no-print {
            display: none !important;
        }
    }
    TABLE{border-collapse: collapse;}
    TH, TD {border:1px solid grey;}
</style>
<div class="no-print">  <!-- This is header for screen and will not be printed -->
    <div>COMPANY NAME FOR SCREEN</div>
    <div>DESCRIPTION FOR SCREEN</div>
</div>

<table>
    <thead>
        <tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
            <td colspan="100" style="border: 0px;">
                <div>COMPANY NAME FOR PRINT</div>
                <div>DESCRIPTION FOR PRINT</div>
            </td>
        </tr>
        <!-- From here Actual Data of table start -->
        <tr>
            <th>Column 1</th>
            <th>Column 2</th>
            <th>Column 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1-1</td>
            <td>1-2</td>
            <td>1-3</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
            <td>2-3</td>
        </tr>
    </tbody>
</table>
0
29.08.2018 22:05:16

Попробуйте это, для меня это работает на Chrome, Firefox и Safari. Вы получите верхний и нижний колонтитулы, закрепленные на каждой странице, не перекрывая содержимое страницы

CSS

<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Pagina " counter(page);
  }

</style>

HTML

<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>
0
27.09.2019 13:54:40

Я удивлен и не впечатлен тем, что Chrome имеет такую ​​ужасную поддержку CSS-печати.

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

CSS-печать не может решить эту проблему, по крайней мере, не с поддержкой современных браузеров. Но, выйдя за пределы печати, CSS3 может сделать большую работу:

https://jsfiddle.net/b9chris/moctxd2a/29/

<div class=page>
  <header></header>
  <div class=content>Content</div>
  <footer></footer>
</div>

SCSS:

body {
  @media screen {
    width: 7.5in;
    margin: 0 auto;
  }
}

div.page {
  display: flex;
  height: 10in;    
  flex-flow: column nowrap;
  justify-content: space-between;
  align-content: stretch;
}

div.content {
  flex-grow: 1;
}

@media print {
  @page {
    size: letter;  // US 8.5in x 11in
    margin: .5in;
  }

  footer {
    page-break-after: always;
  }
}

В этом примере немного больше кода, в том числе немного Cat Ipsum; но используемый js только для того, чтобы продемонстрировать, насколько верхний / нижний колонтитул может меняться, не нарушая нумерацию страниц. Ключ на самом деле заключается в том, чтобы взять трюк, основанный на вставке столбца, из CSS Flexbox, а затем применить его к странице с известной фиксированной высотой - в данном случае, это лист бумаги размером с США размером 8,5 x 11 дюймов с размером .5 "Поля уходят width: 7.5inи height: 10inточно. После того, как гибкий контейнер CSS получает точные размеры ( div.page), легко получить верхний и нижний колонтитул для расширения и сжатия, как в обычной типографии.

Осталось только передать содержимое страницы, когда нижний колонтитул, например, вырос до 8 сносок, а не 3. В моем случае контент достаточно фиксирован, поэтому мне не нужно об этом беспокоиться, но я уверен, что есть способ сделать это. Один подход, который приходит на ум, заключается в том, чтобы превратить верхний и нижний колонтитулы в плавающие элементы шириной 100%, а затем расположить их с помощью Javascript. Браузер автоматически обрабатывает прерывания регулярного потока контента.

2
30.10.2019 06:52:20