是否有可能在每个打印页面上打印带有自定义页眉和页脚的HTML页面?
我想在每个打印页面的顶部和底部添加“UNCLASSIFIED”字样，字体为红色，Arial，大小为16pt，无论内容如何。
为了澄清，如果文档打印到5页上，那么每页都应该有自定义页眉和页脚。
有人知道使用HTML/CSS是否可行吗?
当前回答
使用换行符来定义CSS中的样式:
@media all
{
#page-one, .footer, .page-break { display:none; }
}
@media print
{
#page-one, .footer, .page-break
{
display: block;
color:red;
font-family:Arial;
font-size: 16px;
text-transform: uppercase;
}
.page-break
{
page-break-before:always;
}
}
然后在文档中适当的位置添加标记:
<h2 id="page-one">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
<!-- content block -->
<h2 class="footer">unclassified</h2>
<h2 class="page-break">unclassified</h2>
参考文献
CSS分页媒体:分页符 MDN: page-break-before MDN:前 多栏布局 XHTML打印:第二版 Webkit Bug 5097: CSS2的page-break-after不能工作 打印HTML常见问题:程序是否尊重CSS样式，如分页后? 打印大型HTML表时如何处理换页
其他回答
如果你可以使用javascipt，让客户端处理使用javascript布局内容，根据可用空间放置元素。
你可以使用jquery columnizer插件在固定大小的块中动态布局你的内容，并将你的页眉和页脚作为渲染例程的一部分。 http://welcome.totheinter.net/columnizer-jquery-plugin/
参见例10 http://welcome.totheinter.net/autocolumn/sample10.html
如果在操作系统中启用，浏览器仍然会添加自己的页眉或页脚。跨平台和浏览器的一致布局可能需要有条件的css。
根据我的工作经验，我想我的职位是:固定工作。
body { background: #eaeaed; -webkit-print-color-adjust: exact; } .my-footer { background: #2db34a; bottom: 0; left: 0; position: fixed; right: 0; } .my-header { background: red; top: 0; left: 0; position: fixed; right: 0; } <html> <head> <meta charset=utf-8 /> <title>Header & Footer</title> </head> <body> <div> <div class="my-header">Fixed Header</div> <div class="my-footer">Fixed Footer</div> <table> <thead> <tr> <th>TH 1</th> <th>TH 2</th> </tr> </thead> <tbody> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> <tr> <td>TD 1</td> <td>TD 2</td> </tr> </tbody> </table> </div> </body> </html>
在chrome中按Ctrl+P查看每页的页眉和页脚文本。 希望能有所帮助
神奇的解决方案是把所有东西都放在一个表中。
标题:用于重复的标题。 Tfoot:重复的页脚。 Tbody:内容。
做一个单独的tr td，把所有东西都放在div里
代码:
<table class="report-container">
<thead class="report-header">
<tr>
<th class="report-header-cell">
<div class="header-info">
...
</div>
</th>
</tr>
</thead>
<tfoot class="report-footer">
<tr>
<td class="report-footer-cell">
<div class="footer-info">
...
</div>
</td>
</tr>
</tfoot>
<tbody class="report-content">
<tr>
<td class="report-content-cell">
<div class="main">
...
</div>
</td>
</tr>
</tbody>
</table>
table.report-container {
page-break-after:always;
}
thead.report-header {
display:table-header-group;
}
tfoot.report-footer {
display:table-footer-group;
}
额外:防止多页重叠。如:
<div class="main">
<div class="article">
...
</div>
<div class="article">
...
</div>
<div class="article">
...
</div>
...
...
...
</div>
这将导致溢出，将使内容在分页符内与页眉重叠。
所以>>使用:page-break-inside: avoid !与这类文章。
table.report-container div.article {
page-break-inside: avoid;
}
最好的解决方案来自biskrem muhammad。
但它的答案有一个小问题。当页数大于1时，页脚不在最后一页的页脚。
将这个小CSS添加到由footer-info折叠的元素中
position: fixed;
bottom: 0;
真正的技巧是使用position:固定使其显示在每个页面上，并使用<tfoot>元素来避免在多个页面上重叠。唯一的缺点是你需要知道页脚高度，但如果你使用JS，这可以是动态的。这样的$ (' .footer ') .height ($ (' .footer ')定格()中国当代().height())。可以使用<thead>以同样的方式添加标题。
@page { size: 8.5in 11in; } .page { page-break-after: always; } .footer { height: 75px; } .footer>div { position: fixed; bottom: 0; } body { font-size: 42px; font-family: sans-serif; } <button onclick="print()">print</button> <table> <tbody> <tr> <td> <div class="page">PAGE 1</div> <div class="page"> <div>PAGE 2 OVERFLOWING</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> </div> <div class="page">PAGE THREE</div> </td> </tr> </tbody> <tfoot> <tr> <td class="footer"> <div>© 1999 Footer Example</div> </td> </tr> </tfoot> </table>
推荐文章
- 为什么我的CSS3媒体查询不能在移动设备上工作?
- 下一个元素的CSS选择器语法是什么?
- 是否有'box-shadow-color'属性?
- 在jQuery中的CSS类更改上触发事件
- 我如何用CSS跨浏览器绘制垂直文本?
- 如何获得box-shadow在左侧和右侧
- 相对定位一个元素，而不占用文档流中的空间
- 禁用身体滚动
- 使用jQuery动画addClass/removeClass
- 在一个CSS宽度的小数点后的位置是尊重?
- 检测输入是否有文本在它使用CSS -在一个页面上，我正在访问和不控制?
- 我怎么能选择一个特定的类的最后一个元素，而不是父里面的最后一个孩子?
- @media screen和(max-width: 1024px)在CSS中是什么意思?
- 我怎么能检查html元素，从DOM消失失去焦点?
- 谷歌Chrome表单自动填充和它的黄色背景
