Question

我在页面上有很多内容，我无法控制它的中断位置。我在每个页面上使用position:fixed作为页眉/页脚放置了一些内容，但它与文本重叠。我试图通过以下两种方式使用边距和填充来解决重叠问题。

当我使用@page

添加保证金时

@page {
    margin: 2cm;
}

它可以在每个页面上工作，但是我的页眉和页脚也从边距中消失了。

所以我尝试使用body标签添加保证金

body {
    margin: 2cm;
    /* padding: 2cm; */
}

它通过在第一页上添加2厘米的上边距和在最后一页上添加2厘米的下边距来工作。但不是在页面之间。

是否可以在每页设置页边距/填充？

Answer 1

您的第一个选项是正确的，您需要做的只是将页眉和页脚定位为running。

@page {
    margin: 2cm;

    @top-center {
        content: element(pageHeader);
    }

    @bottom-center {
        content: element(pageFooter);
    }
}

#pageHeader{
    position: running(pageHeader);
}

#pageFooter{
    position: running(pageFooter);
}

Answer 2

我遇到了完全相同的问题，经过大量搜索后，我发现了一篇有趣的文章，提供了一种组合解决方案，您可以阅读here。

简而言之，它结合了两种方法：

使用position: fixed技术
使用thead tbody tfoot

如果仅使用第一种方法，您将面临相同的重叠问题，如果仅使用第二种方法，页脚将停留在页面内容的底部，可能会以最后一页的开头结尾，但是两种方法的结合可以解决问题。

.page-header, .page-header-space {
  height: 100px;
}

.page-footer, .page-footer-space {
  height: 50px;

}

.page-footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  border-top: 1px solid black; /* for demo */
  background: yellow; /* for demo */
}

.page-footer:after {
  counter-increment: page;
  content: counter(page)
}

.page-header {
  position: fixed;
  top: 0mm;
  width: 100%;
  border-bottom: 1px solid black; /* for demo */
  background: yellow; /* for demo */
}

.page {
  page-break-after: always;
}

@page {
  margin: 20mm
}

@media print {
   thead {display: table-header-group;} 
   tfoot {display: table-footer-group;}
   
   button {display: none;}
   
   body {margin: 0;}
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css" />
</head>

<body>

  <div class="page-header" style="text-align: center">
    I'm The Header
    <br/>
    <button type="button" onClick="window.print()" style="background: pink">
      PRINT ME!
    </button>
  </div>

  <div class="page-footer">
    I'm The Footer, Page #
  </div>

  <table>

    <thead>
      <tr>
        <td>
          <!--place holder for the fixed-position header-->
          <div class="page-header-space"></div>
        </td>
      </tr>
    </thead>

    <tbody>
      <tr>
        <td>
          <!--*** CONTENT GOES HERE ***-->
          <div class="page">PAGE 1</div>
          <div class="page">PAGE 2</div>
          <div class="page" style="line-height: 3;">
            PAGE 3 - Long Content
            <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus
            mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor
            pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere
            suscipit venenatis. Donec rhoncus scelerisque metus, in tempus erat rhoncus sed. Morbi massa sapien, porttitor id urna vel, volutpat blandit velit. Cras sit amet sem eros. Quisque commodo facilisis tristique. Proin pellentesque sodales rutrum.
            Vestibulum purus neque, congue vel dapibus in, venenatis ut felis. Donec et ligula enim. Sed sapien sapien, tincidunt vitae lectus quis, ultricies rhoncus mi. Nunc dapibus nulla tempus nunc interdum, sed facilisis ex pellentesque. Nunc vel
            lorem leo. Cras pharetra sodales metus. Cras lacus ex, consequat at consequat vel, laoreet ac dui. Curabitur aliquam, sapien quis congue feugiat, nisi nisl feugiat diam, sed vehicula velit nulla ac nisl. Aliquam quis nisi euismod massa blandit
            pharetra nec eget nunc. Etiam eros ante, auctor sit amet quam vel, fringilla faucibus leo. Morbi a pulvinar nulla. Praesent sed vulputate nisl. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean commodo
            mollis iaculis. Maecenas consectetur enim vitae mollis venenatis. Ut scelerisque pretium orci id laoreet. In sit amet pharetra diam. Vestibulum in molestie lorem. Nunc gravida, eros non consequat fermentum, ex orci vestibulum orci, non accumsan
            sem velit ac lectus. Vivamus malesuada lacus nec velit dignissim, ac fermentum nulla pretium. Aenean mi nisi, convallis sed tempor in, porttitor eu libero. Praesent et molestie ante. Duis suscipit vitae purus sit amet aliquam. Vestibulum lectus
            justo, lobortis a purus a, dapibus efficitur metus. Suspendisse potenti. Duis dictum ex lorem. Suspendisse nec ligula consectetur magna hendrerit ullamcorper et eget mauris. Etiam vestibulum sodales diam, eget venenatis nunc luctus quis. Ut
            fermentum placerat neque nec elementum. Praesent orci erat, rhoncus vitae est eu, dictum molestie metus. Cras et fermentum elit. Aenean eget augue lacinia, varius ante in, ullamcorper dolor. Cras viverra purus non egestas consectetur. Nulla
            nec dolor ac lectus convallis aliquet sed a metus. Suspendisse eu imperdiet nunc, id pulvinar risus. Maecenas varius sagittis est, vel fermentum risus accumsan at. Vestibulum sollicitudin dui pharetra sapien volutpat, id convallis mi vestibulum.
            Phasellus commodo sit amet lorem quis imperdiet. Proin nec diam sed urna euismod ultricies at sed urna. Quisque ornare, nulla et vehicula ultrices, massa purus vehicula urna, ac sodales lacus leo vitae mi. Sed congue placerat justo at placerat.
            Aenean suscipit fringilla vehicula. Quisque iaculis orci vitae arcu commodo maximus. Maecenas nec nunc rutrum, cursus elit quis, porttitor sapien. Sed ac hendrerit ipsum, lacinia fringilla velit. Donec ultricies feugiat dictum.
          </div>
        </td>
      </tr>
    </tbody>

    <tfoot>
      <tr>
        <td>
          <!--place holder for the fixed-position footer-->
          <div class="page-footer-space"></div>
        </td>
      </tr>
    </tfoot>

  </table>

</body>

</html>

在这里您可以看到demo正常工作。

要确保此解决方案正常运行，请尝试按Print Me!按钮进行打印。

您甚至可能需要在页脚中添加页码，这也是由CSS完成的，您只需添加以下CSS：

.page-footer:after {
    counter-increment: page;
    content: counter(page)
}

在某些文章中，它是content: counter(page) " of " counter(pages);，但是在我的情况下，pages一直无故返回0，因此我忽略了它，也许您可以使用CSS var（）。

为便于记录，如果您不想在打印之前观察页眉和页脚，可以添加以下CSS：

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

Answer 3

@page {
    padding: 2cm;
    margin: 3cm;    
}

Answer 4

试试这个......

请务必为打印指定样式表。它可以是单独的样式表，也可以使用bootstrap样式表：

<link rel="stylesheet" type="text/css" media="print" href="print.css">

或

<link rel="stylesheet" type="text/css" href="bootstrap.min.css"> # Note there's no media attribute

然后，您可以使用媒体查询在单独的样式表或共享样式表中为打印机编写样式：

@media print {
/* Your styles here */

}

设置要打印的每页的边距/填充（html / css）？

4 个答案: