当内容跨越一页以上时，标题与内容重叠

Question

我正在将html页面打印为多页pdf。 我在每个页面上都有一个页眉和页脚。 如果内容跨越一页以上，则内容与标题重叠

我设置了

.Page { 
    page-break-before: always;
  }

以便新的部分从下一页开始

    CSS
    @media print {
    header{
            position: fixed;
                top: 0px;

           }
    footer{
          position: fixed;
                bottom: 0px;
           }
    .Page { 
        page-break-before: always;

      }
    header {
        page-break-after: avoid;
      }
    @page {
            size: A4;
        width: 100%;
        margin: 0; padding: 0;

    }
    }
    html
    <header></header>
    <section><div class=Page></div> <div class=Page></div>
    <div class=Page></div>
    <div class=Page></div> </section>
    <footer></footer>

现在的问题是，当“页面”的内容少于1页时，它可以正常工作。它会创建多个页面，其中页眉，内容和页脚位于正确的位置，但是当内容跨越2页时，第二页的页眉会与超出的内容重叠