Question

如何使用@page？

在每个打印页面上重复一些页脚信息

我不想按照＆＃34;复制＆＃34;中的建议使用固定位置div。问题

我刚刚获得了一个完全标准的HTML模板，其中包含以下内容：

<div id="main">

    <h1>This is the title</h1>
    <p>And the content</p>

</div>

这是我的css：

@media print {

    .page-break {
        page-break-after: always!important;
    }

}

@page {
  size: 7in 9.25in;
  margin: 27mm 16mm 27mm 16mm;
}

@page :left {
  @bottom-left {
    content: "This is a test";
  }
}

目前在最新版Chrome中，它在打印预览中没有显示任何内容。我哪里错了？

Answer 1

我一直在玩这个。似乎@page的使用非常有限。这是我能得到的。不是你所希望的。如果可以的话，定位的div可能是最好的。

@media print {
    .page-break {
        page-break-after: always !important;
    }

    /* this adds the content to the bottom of the first page only.
    div::after {
        content: "This is a test";
        bottom: 0;
        position: absolute;
    } */

    /* this adds the content right beside the div. kind of useless.
    .page-break::after {
        content: "This is a test";
    } */

    /* this adds the content to the bottom of the first page only, 
       but multiple times; once for every page-break class i guess.
    .page-break::after {
        content: "This is a test";
        position: absolute;
        bottom: 0;
    } */
}

Answer 2

你可以这样试试：

<head>
    <style>
      p { page-break-after: always; }
      .footer{ position: fixed; bottom: 0px; }
      .pagenum:before { content: counter(page); }
    </style>
  </head>
  <body>
    <div class="footer">Page: <span class="pagenum"></span></div>
    <p>lorem ipsum ...</p>
    <p>lorem ipsum ...</p>
  </body>

我的例子是页面页脚，但你可以通过指定top我所说的底部，当然'footer'变成'header'来对页面标题做同样的事情。你可以把页眉和页脚都放在

Answer 3

您可以尝试的另一种选择是我使用了一段时间，您将需要设置一个本地文件来查看php文件（手动查看wamp for Windows和mamp for mac-linux手动），但是如果您制作了php文件仅包含页脚或导航栏等，就可以使用php load函数将其移至另一个页面。

//In footer.php
<footer>Footer Stuff</footer>

//In index.php or other pages
<body>
    <div id="whereFooterShouldBe"><?php load('footer.php') ?></div>
</body>

在执行此操作时，需要将footer.php中的文件引用（css链接js标记等）相对于正在使用php加载功能的文件而不是footer.php本身进行文件路径化。 / p>

甚至还可以使用此方法将任何html从一个文件加载到另一个文件中。这对于快速开发非常有用，对于我的客户，我在页脚和导航栏上都使用了此方法，因此我只需要更改一个文件即可在所有页面上进行正确的更改。

使用@page

3 个答案: