HTML 打印 pdf CSS

Question

我有一个简单的 HTML 页面，我想将其转换为 pdf(打印模式)。我让标题在每一页中重复，但我注意到标题覆盖了第二页中的内容。有人知道如何避免这种情况吗？

注意:我使用的是 Bootstrap，但我将其注释掉以便我可以使用我自己的样式。

SCSS:

@media print{
header{
  position: fixed;
  top: 0;
  border: none;
}
main{
  margin-top: 2cm;
}

footer{
  position: fixed;
  bottom: 0;
}
@page {
  size: auto;
  //margin: 6.35mm;
}
}

HTML fiddle :https://jsfiddle.net/u1oy0ehj/

谢谢!

Answer 1

@media print仅为打印模式执行代码。因此，您在其中包含的任何内容在正常浏览器模式下都不会受到影响。所以你可以去掉 position: fixed;在 header 中仅适用于打印模式，因此即使在打印模式下它也不会那样做。

固定定位将元素从文档流中取出，因此无法修改该元素。

JSFiddle updated

如果你想要 position: fixed那么你所能做的就是按下 <main>内容向下仅适用于打印模式。

main{ margin-top: 5cm; } //probably more than what you had given '2cm'

即使这样也无济于事，因为在第二页中，由于您已经修复了页眉(它不在文档流中)，溢出的内容会认为页眉不存在并照常继续给您一个叠加效果。