Question

我正在尝试将生成的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文件使页面可见，就像打印到用户一样。
逻辑是使用Node.js 7.5

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

因此可以用任何方式用纯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

开始

Answer 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
}

打印：如何将页脚粘贴在每个页面的底部？

2 个答案: