打印：如何将每页的页脚粘贴到底部？答案

【问题标题】：Print: How to stick footer on every page to the bottom?打印：如何将每页的页脚粘贴到底部？
【发布时间】：2017-07-19 05:05:44
【问题描述】：

我正在尝试将生成的 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 支持，因为我正在使用 electron framework 进行开发
我正在使用这个：https://github.com/delight-im/HTML-Sheets-of-Paper CSS 文件来使页面可见，就像它们将要打印给用户一样。
Logic 使用 Node.js 7.5 构建

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

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

【问题讨论】：

标签： javascript node.js css pdf electron

【解决方案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 将其从顶部绝对定位

【讨论】：

【解决方案2】：

在 Electron 中，您已完全支持 vh（请参阅 http://caniuse.com/#feat=viewport-units）。

只要使用这样的东西：

<div id="page"></div>
<div id="footer"></div>


#footer {
 height: 30px;
}
#page {
 height: calc(100vh - 30px); //viewport height - footer height
}

【讨论】：