页眉和页脚在每个打印页面上都没有覆盖

Question

我希望每个打印页面上的页眉和页脚都没有覆盖， 这是我的css代码：

@media print {
  footer {
    position: fixed;
    bottom: 0;
    top: auto;
    display: block;
    text - align: center;
    width: 100 %;
  }
  #header {
    display: block;
    position: fixed;
    top: 0;
    bottom: auto;
    text - align: center;
    width: 100 %;
  }
  #header div.col - 6 {
    width: 50 %;
    float: left;
  }
  section.container - fluid {
    position: relative;
    page - break -inside: avoid;
  }
  section.container - fluid: before,
  section.container - fluid: after {
    display: block;
    content: "";
    margin - top: 100 px;
    margin - bottom: 100 px;
  }
}

我正在使用windows.print()。

这是问题的图片：

Answer 1

 @page {
    size: A4; 
    margin-top: 2cm;
    margin-bottom: 2cm;
 }

您还可以使用以下技巧来管理打印首页

@page:first {
   margin: 0 0 0 0
}