javascript-打印：如何在每个页面的页脚都贴到底部？

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

<!-- Header -->

<!-- Content -->

<!-- Footer -->

所有这三个页面看起来都很不错.唯一的问题是页脚不会停留在底部…页脚将始终赶上页面的最后一个元素.只要页面上填充了足够的内容,页脚就会位于底部,就像您期望的那样.

这是我的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支持,因为我正在开发电子框架
>我正在使用：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可以通过任何方式实现这一目标吗？如果没有,我还将建立一些逻辑以填充页脚上方的所有空白空间,直到页面达到其最大大小为止.

解决方法:

好的,出于某些奇怪的原因,该解决方案非常容易.
但是我从这里更改了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厘米,所以很容易将元素设置到底部,同时使其绝对位置从上到下分别为：27.7厘米

原文地址：https://codeday.me/bug/20191011/1895825.html