在 HTML 中打印時，如何在每個頁面中為動態內容添加固定的頁眉和頁腳？

Question

打印時，我需要在每個頁面的頂部和底部添加徽標和標題。

頁面的內容是動態的，span/div 可以擴展到多個頁面。 由於內容位於單個 div 或 span 中，因此無法確定分頁符的位置。

我曾嘗試添加頁眉和頁腳 div 和標簽。 但是頁眉和頁腳分別只在第一頁的開頭和最后一頁的末尾顯示一次。 有沒有辦法在每一頁上打印？

Answer 1

HTML

<div class="header">HEADER GOES HERE</div>
<div class="content">content content content</div>
<div class="footer">FOOTER GOES HERE</div>

CSS

@media print{
  .header{
    position: fixed;
    top: 0;
  }
  .footer{
    position: fixed;
    bottom: 0;
  }
}

@media screen{
  .header{
    display:none;
  }
  .footer{
    display:none;
  }
}

您需要調整邊距，以便您的頁眉和頁腳不會與您的內容重疊

Answer 2

嘗試使用position: fixed; 它應該為此工作。