最后一页页脚

Question

我创建了一个 html 页面，提供打印他的内容（window.print）。我想使用以下 CSS 添加打印版本的页脚。

display: table-footer-group;

但我想在最后一页有一个页脚。上面的 CSS 为每个页面生成页脚。我该如何解决？谢谢。

Answer 1

你可以尝试这样的事情：

@page:last {
    /* footer css here */
}

Answer 2

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

.last-page-footer {
    position: running(footer);
}

<p>I'm the content. Extend me until I fit on several pages.</p>

<div class="last-page-footer">
    I'm the footer
</div>

截至 2024 年，浏览器不再正确支持这些属性。在它们受到支持之前，您可以使用 Paged.js 作为 polyfill：

Paged.js 是一些 CSS 属性的填充，用于从浏览器打印 HTML。 Paged.js 旨在实现的 W3C CSS 模块如下：

CSS 分页媒体模块级别 3

CSS 为分页媒体模块生成内容

CSS 碎片模块级别 3

要将 Paged.js 用作 polyfill，请将下面的行复制到文档的

head

。

<script src="https://unpkg.com/pagedjs/dist/paged.polyfill.js"></script>