Question

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

注意：我正在使用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小提琴：https://jsfiddle.net/u1oy0ehj/

谢谢！

Answer 1

@media print仅针对打印模式执行代码。因此，您在其中包含的任何内容都不会受到正常浏览器模式的影响。因此，您可以删除标题中的position: fixed;仅适用于打印模式，因此即使在打印模式下也不会出现这种情况。

固定定位会从文档流中取出一个元素，因此不能摆弄该元素。

JSFiddle updated

如果您想要position: fixed，那么您所能做的只是将<main>内容仅按推送到打印模式。

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

即便这样也无济于事，因为在第二页中你已经修复了你的标题（它已经脱离了文档流程），溢出的内容会认为标题不存在并继续像往常一样给你一个重叠的影响。

HTML打印pdf CSS

1 个答案: