22

I have a web application and it has a report that might exceed one page and I would like to print a header and footer in every page. i find and try this: Repeating a report header in each page but it didn't work for me.I try opera,IE9,Firefox,Google Chrome but ... nothing.page-margin works fine but content is what I want and it doesn't work.

Masoumeh Karvar
  • 791
  • 1
  • 14
  • 32
  • 1
    Possible duplicate of [How to use HTML to print header and footer on every printed page of a document?](http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document) – Quentin Nov 11 '16 at 10:23

4 Answers4

22

You can set a position: fixed; header and footers so that it will repeat on each page

For Example

<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's header */
    }
    footer.onlyprint {
        position: fixed;
        bottom: 0; /* Because it's footer */
    }
}
Dennis C
  • 24,511
  • 12
  • 71
  • 99
Mr. Alien
  • 153,751
  • 34
  • 298
  • 278
  • @PauFracés It was not supporting previously, not sure about the current status, I had used it for firefox way back so thought this might help him – Mr. Alien Dec 30 '12 at 07:10
  • I'm dealing with the same topic, but need it working on webkit. I haven't been able to do it with html+css so I am working right now in a javascirpt library for get the job done. Hence my interest – Pau Fracés Dec 30 '12 at 17:42
  • This works really well. But is there a way I can say like, I dont want a header on a specific page. Like last page or a page in the middle somehow? – Piotr Kula Sep 16 '16 at 12:25
  • Is there some solution to print header logo just on first page instead of each page? – Mile Mijatović Apr 25 '17 at 06:49
6

I really appreciate your reply but i have used this solution(position : fixed) before and the content of the page would be masked by the header. so i have to use "@page" which only works with "Margin" property and "Content" does not work or in other words i cannot reach the result i want.

Masoumeh Karvar
  • 791
  • 1
  • 14
  • 32
  • 4
    It will work with `position:fixed`. For example, if you set the margin of *@page:margin-top:2mm*, damp the html page to *html:margin-top:20mm* and your fixed header to *header:margin:0*. This will put your fixed header at page margin of 2mm while the page content will adhere to html margin 20mm. No overlap, even on print out. – frequent Feb 17 '16 at 15:01
  • the `html` margin is a clever trick. Works swell. Do you know if I can change that per printed page though? – Piotr Kula Sep 16 '16 at 12:26
  • 2
    I cannot find a combination of @page margin and html margin settings that work for multiple pages for Chrome as of writing. – Mark May 14 '19 at 07:44
5

There is currently a bug in the webkit engine (https://bugs.webkit.org/show_bug.cgi?id=100075) that results in totaly misplaced footers.

Markus
  • 51
  • 3
4

I found a solution that worked for me and only one that works without problem.

In 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>

in 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;
            }
user10810851
  • 41
  • 1