Верхний и нижний колонтитулы на каждой странице в режиме печати с помощью css

У меня есть веб-приложение, и у него есть отчет, который может превышать одну страницу, и я хотел бы печатать верхний и нижний колонтитулы на каждой странице. я найду и попробую: Повторение заголовка отчета на каждой странице но это не сработало для меня. Я использую оперу, IE9, Firefox, Google Chrome, но... Nothing.page-margin работает отлично, но контент - это то, что я хочу, и оно не работает.

Ответ 1

Вы можете установить верхний и нижний колонтитулы position: fixed;, чтобы он повторялся на каждой странице

Пример

<header class="onlyprint"><!--Content Goes Here--></header>
<footer class="onlyprint"><!--Content Goes Here--></footer>

@media screen {
    header.onlyprint, footer.onlyprint{
        display: none; /* Hide from screen */
    }
}

@media print {
    header.onlyprint {
        position: fixed; /* Display only on print page (each) */
        top: 0; /* Because it header */
    }
    footer.onlyprint {
        position: fixed;
        bottom: 0; /* Because it footer */
    }
}

Ответ 2

Я очень ценю ваш ответ, но раньше я использовал это решение (положение: исправлено), и содержимое страницы было замаскировано заголовком. поэтому я должен использовать "@page", который работает только с свойством "Margin" и "Content" не работает, или, другими словами, я не могу достичь результата, которого хочу.

Ответ 3

В настоящее время в движке webkit есть ошибка (https://bugs.webkit.org/show_bug.cgi?id=100075), что приводит к полному отсутствию нижних колонтитулов.

Ответ 4

Я нашел решение, которое работает для меня, и только одно, которое работает без проблем.

В HTML

<table>
        <thead><tr><td>
            <div class="header-space">&nbsp;</div>
        </td></tr></thead>
        <tbody><tr><td>
            <div id="pageHost" class="content"></div>
        </td></tr></tbody>
        <tfoot><tr><td>
            <div class="footer-space">&nbsp;</div>
        </td></tr></tfoot>
    </table>
    <header id="pageHeader">
    </header>
    <footer id="pageFooter">
        Custom Footer
        <div class="numberOfPages">

        </div>
    </footer>

в CSS

            header, .header-space,
            footer, .footer-space {
                height: 100px;
                font-weight: bold;
                width: 100%;
                padding: 10pt;
                margin: 10pt 0;
            }

            header {
                position: fixed;
                top: 0;
                border-bottom: 1px solid black;
            }

            footer {
                position: fixed;
                bottom: 0;
                border-top: 1px solid black;
            }