最后打印页的页脚

Question

我有一个客户想要打印的网页，而我无法理解的部分是让页脚位于最后打印页面的底部，而不仅仅是在内容结束时

我尝试过类似的事情

 #printfooter{display: block; position:fixed; bottom: 0;}

但它在每页末尾显示页脚。

也许我对 CSS 的要求有点太多了……这可行吗？

我想我应该为
的（^_^）疯狂

Answer 1

尝试将正文定位为相对位置，将页脚定位为绝对位置：

body {
    position: relative;
}
#printfooter {
    position: absolute;
    bottom: 0;
}

使用 CSS 3 分页媒体模块，你可以使用这样的东西：

@page:last {
    @bottom-center {
        content: "…";
    }
}

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>