<!DOCTYPE html>
<html>
<head></head>
<body>
<h1>
Example Document
</h1>
<div>
<p>
This is an example document that shows how to have a footer that repeats at the bottom of every page, but also isn't covered up by paragraph text.
</p>
</div>
<div>
<h3>
Example Section I
</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar.
Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit.
Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero.
</p>
</div>
<div class="content-block">
<h3>Example Section II</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex.
Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Sed sed elit egestas libero maximus finibus eu eget massa.
</p>
</div>
<footer>
This is the text that goes at the bottom of every page.
</footer>
</body>
</html>
<table>
<thead>
<tr>
<th>This content appears on every page</th>
</tr>
</thead>
<tbody>
<tr>
<td>Put all your content here, it can span multiple pages and your header will show up at the top of each page</td>
</tr>
</tbody>
</table>
<style>
@media screen {
.only_print{
display:none;
}
}
@media print {
.no-print {
display: none !important;
}
}
TABLE{border-collapse: collapse;}
TH, TD {border:1px solid grey;}
</style>
<div class="no-print"> <!-- This is header for screen and will not be printed -->
<div>COMPANY NAME FOR SCREEN</div>
<div>DESCRIPTION FOR SCREEN</div>
</div>
<table>
<thead>
<tr class="only_print"> <!-- This is header for print and will not be shown on screen -->
<td colspan="100" style="border: 0px;">
<div>COMPANY NAME FOR PRINT</div>
<div>DESCRIPTION FOR PRINT</div>
</td>
</tr>
<!-- From here Actual Data of table start -->
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
</tr>
</tbody>
</table>
15 回答
如果您将要作为页脚的元素设置为位置：固定和底部：0，当页面打印时，它将在每个打印页面的底部重复该元素 . 这同样适用于头元素，只需设置顶部：0 .
例如：
CSS：
我相信正确答案是HTML 5和CSS3不支持在
print媒体中打印页面页眉和页脚 .虽然你可以用以下方法模拟它：
表
固定位置块
他们每个人都有虫子，阻止他们成为理想的一般解决方案 .
我只是花了一半时间来提出一个实际上对我有用的解决方案，并且认为我会分享我的所作所为 . 上面我解决的解决方案的问题是我的所有段落元素都会与页面底部所需的页脚重叠 . 为了解决这个问题，我使用了以下CSS：
p对于p和content-block对我来说至关重要 . 每当我在h*之后有一个p时，我都会将它们包裹在div class = "content-block">中，以确保它们保持在一起并且不会中断 .我希望有人觉得这很有用，因为我花了大约3个小时才搞清楚（我也是CSS / HTML的新手，所以就是那个......）
编辑
根据评论中的请求，我添加了一个示例HTML文档 . 您需要将其复制到HTML文件中，打开它，然后选择打印页面 . 打印预览应显示此工作 . 它在我的Firefox和IE上工作，但Chrome使字体足够小，以适应一个页面，所以它不起作用 .
我一直在寻找解决方案多年，并发现这篇文章在how to print a footer that works on multiple pages without overlapping page content.
我的要求是IE8，到目前为止我发现这在Chrome中不起作用 . [ update ]截至2018年3月1日，它也适用于Chrome
此示例通过设置css样式来使用表和tfoot元素：
使用page breaks在CSS中定义样式：
然后在适当的位置添加文档中的标记：
References
CSS Paged Media: Page Breaks
MDN: page-break-before
MDN: break-before
Multi-column Layout
XHTML Print: Second Edition
Webkit Bug 5097: CSS2 page-break-after does not work
Print HTML FAQ: Will the program respect CSS styles such as page-break-after?
How to deal with page breaks when printing a large HTML table
从this question - 将以下样式添加到仅打印样式表 . 此解决方案适用于IE和Firefox，但not in Chrome（从版本21开始）：
我尝试结合tfoot和css规则来对抗这个徒劳的战斗，但它只适用于Firefox :( . 当使用普通的CSS时，内容流过页脚 . 当使用tfoot时，最后一页上的页脚不能很好地保留在底部这是因为表格页脚用于表格，而不是物理页面 . 在Chrome 16，Opera 11，Firefox 3和6以及IE6上进行测试 .
一种仅适用于向每个页面添加 Headers 的方法是将您的内容包装在
<table>中，然后将 Headers 内容放在<thead>标记中，将您的内容放在<tbody>标记中，如下所示：这适用于Chrome，不是100％肯定其他浏览器 .
神奇的解决方案是将所有东西放在单个表中 .
thead ：这是针对重复的 Headers .
tfoot ：重复的页脚 .
tbody ：内容 .
并制作一个tr，td并将所有东西放入div中
CODE ::
extra：防止与多个页面重叠 . 喜欢：
这导致溢出，使事情与页面中断内的 Headers 重叠..
所以>>使用：
page-break-inside: avoid !important;与此类article.非常简单，希望这会给你最好的结果 .
最好的祝福 . ;）
如果你可以使用javascipt，让客户端使用javascript来布局内容，根据可用空间放置元素 .
您可以使用jquery columnizer插件以固定大小的块动态布局内容，并将页眉和页脚定位为渲染例程的一部分 . http://welcome.totheinter.net/columnizer-jquery-plugin/
见例10 http://welcome.totheinter.net/autocolumn/sample10.html
如果在操作系统中启用，浏览器仍会添加自己的页眉或页脚 . 跨平台和浏览器的一致布局可能需要条件css .
这是你想要打印的东西吗？您可以将其添加到站点上的每个页面，并使用CSS将标记定义为仅打印媒体 .
例如，这可能是一个示例 Headers ：
并在你的CSS，做这样的事情：
最后，要在每个页面上包含页眉/页脚，您可以使用服务器端包含，或者如果您使用PHP或ASP生成任何页面，则只需将其编码为公共文件即可 .
Edit:
这个答案旨在提供一种在文档的物理印刷版本上显示某些内容而不显示文档的方法 . 然而正如评论所暗示的那样，它并没有解决内容溢出时在多个打印页面上设置页脚的问题 .
我将它留在这里以防万一它仍然有用 .
我找到了一个解决方案基本的想法是制作一个表格并在thead部分中将 Headers 的数据放在tr和css force中以显示tr仅在打印中而不是在屏幕中然后你的正常 Headers 应该强制仅在屏幕中显示而不是在打印中 . 100％处理多页打印 . 示例代码在这里
如果您使用的是Asp.net Razor Engine或Angular等模板引擎，我认为您必须重新生成页面并将页面拆分为多个页面，然后您可以自由标记每个页面并将页眉和页脚放在主题上 . 一个例子可能如下：
如果你不需要格式化使用
document.title，它在每个主要浏览器中都有魅力（在Chrome，IE 11，Firefox中测试） .或者你可以使用
根据一些帖子，我认为
position: fixed适合我 .按chrome中的Ctrl P，查看每页上的页眉和页脚文本 . 希望能帮助到你