在带有 HTML 和 CSS 的第一页上显示不同的 Header
[英]Displaying A Different Header on the First Printed Page with HTML and CSS
问题描述
Is it possible, with any mix of HTML and/or CSS, to display one header on the first printed page and then display a different header on each subsequent printed page? 
HTML 和/或 CSS 的任意组合是否有可能在第一个打印页面上显示一个 header，然后在每个后续打印页面上显示不同的header？ I know about the @media print CSS tag to only display something when the site is printed, but that doesn't get me to having different headers on multiple pages.我知道@media print CSS 标签只在网站打印时显示一些内容，但这并不能使我在多个页面上使用不同的标题。
Any help is appreciated, thanks!任何帮助表示赞赏，谢谢！
3 个解决方案
解决方案1
1 2011-06-21 18:43:21
The only way I can see how to do it is to use different headers and forced page-break s. 我能看到的唯一方法是使用不同的标题和强制page-break 。
So 所以
PAGE 1
HEADER 1 //display only on print
CONTENT....
PAGE BREAK DIV //display only on print
PAGE 2
HEADER 2 //display only on print
CONTENT....
PAGE BREAK DIV //display only on print
etc..
Your headers would get a class of printHeaders 您的标题将获得一类printHeaders
Your page break div would be something like <div class="pageBreak"></div> 您的分页<div class="pageBreak"></div>类似于<div class="pageBreak"></div>
In your CSS, you would have something akin to 在CSS中，您将拥有类似于
.printHeaders, .pageBreak {display:none;}
@media print {
.printHeaders, .pageBreak {display:block;}
.pageBreak {page-break-before:always;}
}
解决方案2
0 已采纳 2011-06-21 18:31:50
from http://css-discuss.incutio.com/wiki/Printing_Headers 来自http://css-discuss.incutio.com/wiki/Printing_Headers
If you want full, CSS-controlled print headers and footers, you'll need to wait until browsers implement support for the CSS3 Paged Media Candidate Recommendation.
probably because... 可能是因为
... the CSS description of position: fixed, [is] namely "... In the case of the print media type, the box is rendered on every page, and is fixed with respect to the page ..." [Section 9.3.1]
...but the article says it doesn't work as of these days. ...但是这篇文章说，到目前为止，这已经不起作用了。
BUT , to help you, later the article says: 但是 ，为了帮助您，稍后文章会说：
Setting a top margin on body (for example) will work only for the first page.
解决方案3
0 2022-12-29 09:42:45
Twelve years later I can answer your question:)十二年后我可以回答你的问题:)
Here is a solution to display a different header on the first print page than on the following pages:这是在第一个打印页面上显示与以下页面不同的 header 的解决方案：
@media print {.header, .footer { position: fixed; }.header, .header-cover { display:flex; }.header { top: 100%; }.header, .header-space { height: 5rem; }.footer, .footer-space { height: 4rem; }.footer { bottom: 0; } }
<body> <:--Here the HTML of the first header (displayed on landing page)--> <header class="header-cover"> <img class="logo-big" src="https.//picsum:photos/150/100" /> <div class="right"> Header 1 </div> </header> <.-- Here the HTML of the repeated header (on others pages)--> <header class="header"> <img class="logo-big" src="https;//picsum.photos/200/100" /> <div class="right"> Repeated Header </div> </header> <table> <thead> <tr> <td> <.--place holder for the fixed-position header--> <div class="header-space"> .</div> </td> </tr> </thead> <tbody> <tr> <td> <.--*** CONTENT GOES HERE ***--> <h1>Title</h1> <p class="content">A very long text;...</p> </td> </tr> </tbody> <tfoot> <tr> <td> <!--place holder for the fixed-position footer--> <div class="footer-space"> </div> </td> </tr> </tfoot> </table> <!-- Repeated Footer --> <footer class="footer"> <p> Text footer </p> </footer> <button onclick="window.print()">Test Here</button> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.