javascript - 打印 : How to stick footer on every page to the bottom?

Question

我正在尝试将生成的 HTML 文档打印为 PDF。文档本身可以容纳多页。每个页面都是这样构建的:

<!-- Header -->

<!-- Content -->

<!-- Footer -->

这三个在每个页面上看起来都很好。唯一的问题是页脚不会粘在底部...页脚将始终 catch 页面的最后一个元素。只要页面填充了足够的内容，页脚就会像您期望的那样位于底部。

这是我的 CSS:

.docFooter{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-right: 2cm;
    padding-bottom: 1cm;
}

我还尝试生成一个单独的 CSS，如下所示:

@media print{
    .docFooter{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        width: 100%;
        position: absolute;
        bottom: 0;
        padding-right: 2cm;
        padding-bottom: 1cm;
    }
}

当然，我使用的是这样的 CSS:

<link rel="stylesheet" href="./main.min.css" media="all">

旁注:

• 我只需要 Chrome 支持，因为我正在使用 Electron 框架进行开发
• 我正在使用这个:https://github.com/delight-im/HTML-Sheets-of-Paper CSS 文件使页面可见，就像它们将被打印给用户一样。
• 逻辑是使用 Node.js 7.5 构建的

我做了一些研究并尝试了这些问题的答案，但没有成功:

• Sticking custom footer on each page to bottom while printing
• make a div at the bottom of a specific page on printing
• How to use HTML to print header and footer on every printed page of a document?

那么有没有可能用纯 CSS 来实现这一点？如果没有，我还会构建一些逻辑来填充页脚上方的所有空白空间，直到页面达到其最大大小。

Answer 1

好吧，由于某些奇怪的原因，解决方案非常简单。 不过我已经改变了我的CSS:

.docFooter{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    bottom: 0;
    padding-right: 2cm;
    padding-bottom: 1cm;
}

对此:

display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    width: 100%;
    position: absolute;
    top: 27.7cm !important;
    padding-right: 2cm !important;

因为我知道 A4 页面不会超过 29.7 厘米，所以很容易将元素设置到底部，同时使其从顶部绝对定位 top: 27.7cm