我在打印 HTML 页面时遇到了我正在处理的应用程序的问题。该应用程序从生成的报告中提取数据作为其数据源，以将内容填充到 HTML 元素中，为此我们使用 HandlebarsJS 模板框架。
该应用程序集成为 Sharepoint webpart(本质上是一个在 Sharepoint 页面中包含该应用程序的 iFrame)，在屏幕上，该 View 似乎是一个无尽的页面，设置的标题仅位于该页面的最顶部底部的 View 和页脚(这是预期的行为)。
但是，当打印此页时，我们希望在每个不同的页面上重复页眉和页脚。
@media print {
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
}
使用此 CSS 规则，我们能够设置要重复的页眉和页脚，但任何进入下一页的内容都会重叠，并且无法提供令人愉悦的打印 View 。我试过操纵 margin属性，但不会成功，并且因为应用程序的本质是动态的，所以我不确切知道对于每个给定的报告，每次哪些 HTML 元素将运行到下一页。
我只负责将 HTML 片段上传到模板 View 的模板库，应用程序代码负责处理整个页面本身，因此我无权访问 <html> , <body> , 或 <head>标签。
在整个网络上寻找解决方案，但似乎这仍然是人们今天遇到的问题。是否有人熟悉解决此问题的解决方案？
最佳答案
position: fixed 本质上会使您的元素固定到页面的那部分。这意味着如果该位置应存在其他内容，则固定元素将与其重叠。
假设您的 <header> 和 <footer> 标签分别位于内容的顶部和底部(它们应该如此)，即 <header>将自动出现在页面的正确位置。没有 position: fixed ，您将能够申请 margin-bottom 到 <header>默认情况下 static如果您希望将其余内容下移到页面下方。
因此，您只需要担心页脚，无论内容的高度如何，页脚都可以设置为页面底部 flexbox :
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
这两个都可以在下面看到(内容不多):
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
header {
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}<header>Header</header>
<div class="content">Tiny Content</div>
<footer>Footer</footer>内容丰富:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
header {
margin-bottom: 20px;
}
footer {
margin-top: 20px;
}<header>Header</header>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum accumsan quam, a vestibulum quam lacinia vel. Nam id odio rhoncus, viverra nisi quis, vehicula lectus. Duis sodales, mauris a tincidunt elementum, odio lorem finibus est, in vestibulum nunc leo dignissim tortor. Vestibulum sed diam id nisi congue pretium. Suspendisse venenatis posuere lectus, non pretium sapien blandit placerat. Fusce mollis ullamcorper tincidunt. Mauris consectetur porta justo quis mollis. Integer non nisi id velit tincidunt tristique.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus dictum orci libero, et vulputate lorem rutrum in. Nam eget ipsum massa. Proin aliquam felis orci, fermentum dignissim magna congue nec. Maecenas pharetra sodales tellus eu maximus. Curabitur iaculis, diam quis finibus cursus, justo ex luctus eros, ut venenatis eros diam quis dolor. Vestibulum eget porta odio. Quisque et sodales tellus, non fermentum odio. Praesent a nulla in ipsum pellentesque elementum nec quis neque. Sed congue risus libero, sed aliquam libero euismod et. Nunc id ultrices risus.
Vestibulum ut diam sapien. Donec semper turpis vitae iaculis rutrum. Donec dignissim ornare massa, ut rutrum diam egestas vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Praesent vulputate iaculis tincidunt. Phasellus sit amet dolor a justo mollis fermentum. Quisque a varius nisl. Sed vel nisl sit amet mi mollis sagittis at in lacus. Cras at velit sit amet nibh viverra dignissim vel ullamcorper mi. Curabitur convallis ante vel sapien gravida, non feugiat nisi dictum. Maecenas vitae ullamcorper eros, eget mollis purus. Nam rutrum eros eu rhoncus suscipit. Praesent sit amet posuere eros. Mauris ut nisl a elit gravida luctus et id orci. Etiam tempor, nunc id volutpat interdum, ligula libero imperdiet magna, auctor mattis nunc nisl ac augue.</div>
<footer>Footer</footer>在我看来，这是创建页脚的“最佳”方法，它始终位于底部而不重叠，但实际上还有其他四种不同的方法，可以在 CSS Tricks 中看到。 .
希望这对您有所帮助!
关于html - 在没有重叠内容的情况下将 CSS @print 用于页眉/页脚，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48572076/