html - 如何在使用 css 自动分页后创建上边距？

Question

这是对我真正难以实现的功能的描述。

模型

描述

• 生成的 pdf 文档包含许多部分
• 某些部分可以打印在许多页面上
• 我们不知道内容的大小(可变高度)
• 页面不得有边距(标题位于 (0,0) 且与页面宽度相同，文档打印无边框)
• 内容可以是任何内容:段落、标题、图像、图表、svg 元素、表格...

目标

当一个节的内容在下一页自动中断时，该页的边距应等于页眉

示例:#2 部分打印在第 2 & 3 页上；第 3 页应该有上边距。

问题

因为页边距设置为“0”，我们应该在自然分页后定义一个填充/边距，但是，我找不到如何让它很好地工作 (1)

技术

我正在使用 RelaxedJS (pdf 是用 Chromium 生成的)

如果您知道如何处理该特定案例，请提前致谢。我已经阅读了很多文档。最佳人选可能是 CSS Fragmentation Box Decoration Break Clone但我不能让它与 block 一起使用，只能使用内联元素和段落。

---

(1) 我已经尝试过使用表格和 thead 设置页面顶部边距的解决方案...但是当您用内容填充单元格时它不起作用。我猜这在使用@page 规则时有严重的局限性。

Answer 1

几天前我不得不面对同样的问题。

想法很简单，您必须这样做:

• 设置@page边距(考虑header和footer的height)
• 设置header和footer position: fixed并调整top和bottom 属性。
• 使用 page-break-after 控制 .page-content 以确保内容转到下一页。

Notice that I used the DOMPDF Laravel to generate the PDF. May be there are some differences using RelaxedJS but anyway you can try this just in case.

希望对您有所帮助。 Here is the same code in Codepen

@page { 
  margin: 160px 0px;   
  padding: 0;     
}

body {
  margin: 0;
  padding: 0;
}

h2 {
  text-align: left;
  margin-left: 50px;
}

header { 
  background-color: yellow;
  width: 100%;
  height: 120px;
  color: black;
  display: flex;
  align-items: center;
  
  position: fixed; 
  top: -120px; 
  left: 0px; 
  right: 0px;   
}

.page-content {
  margin-top: 0px;
  margin-bottom: 60px;
}

.page-content p {
    page-break-after: always; 
    padding: 5px 30px;
  
}

.page-content p:last-child { 
    page-break-after: never; 
}

footer { 
    position: fixed; 
    bottom: 50px; 
    right: 0; 
    left: 0; 
    padding: 0;
    margin: 0;
  
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: lightblue;
    height: 50px;
  
}

footer, .page-content {
  margin-left: 100px;
  border-left: solid black 1px;
}

<header><h2>HEADER SECTION #</h2></header>
<div class="page-content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque neque vel lectus rutrum, quis suscipit tortor ornare. Maecenas a enim sit amet neque vehicula imperdiet. Donec auctor convallis tellus. Suspendisse a arcu a tortor congue aliquet vel a justo. Cras sit amet pulvinar tortor. Vestibulum vel lobortis libero, eu accumsan ipsum. Donec felis sem, consequat quis pharetra sit amet, facilisis eget odio. Suspendisse nec vestibulum urna, non fermentum lorem.</p>
  <p>Sed orci neque, fringilla nec urna at, iaculis laoreet metus. Nam fringilla sit amet sapien iaculis malesuada. Duis pellentesque odio vitae quam pellentesque sollicitudin. Duis nec commodo mauris, ac eleifend nunc. Vestibulum ac finibus nisi. Aliquam at neque augue. Cras metus mi, ultricies vitae dui sit amet, lacinia aliquet nunc. Duis vitae urna et arcu auctor tristique et id lectus. Praesent ut sollicitudin nibh. Mauris quis vehicula ipsum. Quisque feugiat nec felis et cursus. Donec neque ante, accumsan a tincidunt at, ultrices et lectus. Nullam finibus, ipsum facilisis euismod accumsan, nulla quam ultrices odio, id efficitur purus nisl id lacus. Duis bibendum est quis ligula aliquam rhoncus. Nunc dapibus, odio vel tincidunt faucibus, justo dolor tempor nisl, eu maximus nibh odio nec risus. Nullam ut lacinia purus.</p>
  <p>Praesent finibus nisi congue sodales elementum. Vestibulum mauris libero, varius a urna at, vestibulum eleifend nisl. Maecenas et metus dapibus, semper quam a, suscipit libero. Mauris malesuada pretium maximus. Sed semper urna vitae iaculis mattis. Praesent luctus, ipsum et consequat lacinia, purus nisi scelerisque sem, eu luctus metus erat at arcu. Aenean aliquam fermentum condimentum.</p>
  <p>Pellentesque felis mi, semper ac ullamcorper vel, accumsan ac tortor. Donec vestibulum varius enim, vitae tempor ligula accumsan eget. Etiam quis nunc felis. Phasellus scelerisque, purus eget sollicitudin gravida, felis justo euismod dui, ut fringilla nulla nunc vitae risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo pretium sapien eleifend molestie. Nullam consequat ligula sit amet purus sodales vehicula. Duis placerat aliquet augue, ut dapibus turpis malesuada sit amet. Vivamus id nulla odio. Integer a velit ac eros rutrum tempus. Vestibulum quis sodales turpis.</p>
  <p>Vivamus eu enim fringilla turpis euismod finibus id quis dolor. Pellentesque ex massa, congue at nisl at, lacinia ornare urna. Aenean pretium posuere dictum. Nullam justo metus, eleifend a dictum sit amet, gravida ut arcu. Fusce libero leo, sollicitudin at est non, venenatis auctor nulla. Vivamus luctus tellus eu metus interdum congue eget non magna. Curabitur congue felis nulla, eu consectetur tellus viverra et. Nunc ullamcorper ac nisl a elementum. Morbi viverra magna in orci tristique, eget suscipit nunc suscipit. Morbi sodales dolor a feugiat bibendum. Duis nunc nisl, pulvinar at sem quis, cursus lacinia arcu. Aliquam in dictum arcu.</p>
</div>
<footer>Page X</footer>