发表新帖
发表新帖

Is there a way to get a web page header/footer printed on every page?

前端 未结
关注
4 1803
轻奢々
轻奢々 2020-11-27 05:55

Based on my research, it seems that what I want to do is not possible, but in case something has changed, I wanted to check to see if anyone had come up with a way to do thi

相关标签:
4条回答
  • 佛祖请我去吃肉
    2020-11-27 06:27

    It can be done with tables -- and I know I'm going to risk a downvote by suggesting using tables for layout - but we are talking IE6 here which isn't known for its fantastic CSS support :-)

    If you set a CSS style as follows:

    thead { display: table-header-group; }
tfoot { display: table-footer-group; }

    Then when you create your HTML, render your body as:

    <body>
<table>
   <thead><tr><td>Your header goes here</td></tr></thead>
   <tfoot><tr><td>Your footer goes here</td></tr></tfoot>
   <tbody>
     <tr><td>
     Page body in here -- as long as it needs to be
     </td></tr>
   </tbody>
</table>
</body>

    Yes it's not good (tables vs CSS), it's not ideal, but (importantly for you) it does work on IE6. I can't comment on Firefox as I've not tested it there, but it should do the job. This will also handle differnt sized pages, differing font sizes, etc. so it should "just work".

    If you want the header and footer to appear on printed media only, then use the @media parameters to do the right thing:

    @media print {
    thead { display: table-header-group; }
    tfoot { display: table-footer-group; }
}
@media screen {
    thead { display: none; }
    tfoot { display: none; }
}

    Note
    As of July 2015, this will still only work in Firefox and IE. Webkit-based browsers (cf. Chrome, Safari) have long standing bugs in their issue trackers about this if anyone feels strongly enough to vote on them:

    The comments below this question tell me this is now resolved in Chrome. I haven't checked myself :-)

    The original bugs against Chrome (for reference) are:

    • https://bugs.webkit.org/show_bug.cgi?id=17205
    • https://code.google.com/p/chromium/issues/detail?id=24826
    • https://code.google.com/p/chromium/issues/detail?id=99124
    0 讨论(0)
  • 遇见更好的自我
    2020-11-27 06:35

    try to generate a (rtf | pdf) document for printing

    0 讨论(0)
  • 感情败类
    2020-11-27 06:36

    I would suggest to divide the page in table, and add the header part to first row and the footer part to the last row. The contents of the rows between the first and last rows can be changed dynamically so you will get the constant header and footer at desired pages.

    ----------
ROW1    HEADER
----------
ROW2   
 Insert dynamic contents here
ROW N-1
----------
ROW N Footer
    0 讨论(0)
  • 一生所求
    2020-11-27 06:37

    This will work in some browsers, not not all. I don't think there is an elegant cross-browser solution

    Include the print footer/header you want in divs on the page (in this example div id='printableFooter')

    In the screen css file put:

    #printableFooter {display: none;}

    In the print css file:

    #printableFooter {display: block; position: fixed; bottom: 0;}
    0 讨论(0)
 看不清?
提交回复
热议问题