Печать верхнего / нижнего колонтитула на всех страницах (режим печати) - PullRequest
Новая
       29

Печать верхнего / нижнего колонтитула на всех страницах (режим печати)

24 голосов
/ 02 декабря 2011 
<div id="header">header</div>
<div id="content">
    content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>

Я хочу напечатать #header и #footer на каждой странице в режиме печати. Я много искал, но ничего не работает, даже position:fixed не работает, как ожидалось.

Ответы [ 4 ]

24 голосов
/ 02 декабря 2011

Если вы хотите переключиться на таблицы для вашего макета (не обязательно идеально), вы можете сделать это с элементами <thead> и <tfoot>. Они будут печататься вверху и внизу каждой страницы: 

<table>

  <thead>
     <!-- Will print at the top of every page -->
  </thead>

  <tbody>
     <!-- Page content -->
  </tbody>

  <tfoot>
     <!-- Will print at the bottom of every page -->
  </tfoot>

</table>

Другим вариантом является использование дисплея table-header-group и table-footer-group, но поддержка кросс-браузерной работы невелика: 

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

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

#footer {
  display: table-footer-group;
}
4 голосов
/ 28 июня 2017

Я думаю, что я опоздал :), но я искал что-то вроде этого, и я нашел один ответ, который мне помогает (источник https://www.youtube.com/watch?v=yDgFLysON98).) Я написал тег div до и после контента, подобного этому 

<div id="header">Top div content</div>

.
.
.
<div id="footer">Bottom div content</div>

Пример: 

<!DOCTYPE html>
<html>
<head>``
<style>
body {
    background-color: #CCC;
    margin:48px 0px 0px 64px;
}
div#header {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
div#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>

... надеюсь, это поможет.

2 голосов
/ 12 февраля 2016

Для этого вам нужно использовать mso (свойства Microsoft Office CSS) в вашем стиле: 

<style><--
@page 
{
    size:21cm 29.7cmt;
    margin:1cm 1cm 1cm 1cm; 
    mso-title-page:yes;
    mso-page-orientation: portrait;
    mso-header: header;
    mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
0 голосов
/ 10 июня 2018

Nisse Engstroms ответ правильный.Вам просто нужно поместить содержимое thead и tfoot в tr, чтобы он работал. И это также лучший способ, потому что когда вы используете абсолютное позиционирование в div для создания верхнего и нижнего колонтитула, он всегда будет перекрываться с вашим основным содержимым тела наследующая страница. 

    
    <table>
    
    <thead>
    <tr> !-- these are important
    <th id="header"> !--- these are important
        !--- content of header here
    </th>
    </tr>
    </thead>
    
    <tbody>
    <tr>
    <td>
    !---- main body here
    </td>
    </tr>
    </tbody>
    
    <tfoot>
    <tr>
    <th id="footer">
    
        !----- content of footer here
    </th>
    </tr>
        </tfoot>
    
        </table>
...