打印:如何将每页上的页脚粘贴到底部? [英] Print: How to stick footer on every page to the bottom?

问题描述

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

I'm trying to print a generated HTML document to PDF. The document itself can hold multiple pages. Every page is built up like this:

<!-- Header -->

<!-- Content -->

<!-- Footer -->

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

All three look fine on every page. The only problem is that the footer won't stick at the bottom... The footer will always catch up with the last element of the page. As long as the page is filled with enough content the footer will be at the bottom as you would expect it to be.

这是我的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:

I've also tried to generate a separate CSS like this:

@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:

And of course I'm using the CSS like this:

<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构建的

• I just need Chrome support, since I'm developing with the electron framework
• I'm using this: https://github.com/delight-im/HTML-Sheets-of-Paper CSS files to make pages visible like they are going to be printed to the user.
• Logic is built with Node.js 7.5

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

I did some research and tried out the answers from these questions with no success:

• 在每个页面上将自定义页脚粘贴到底部，同时打印
• 在打印特定页面的底部

• 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:

Ok, the solution was super easy for some strange reason. However I've changed my CSS from this:

.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

Since I know that a A4 page won't exceed 29.7cm it was easy to set the element to the bottom while making it absolute positioned coming from top with top: 27.7cm

这篇关于打印:如何将每页上的页脚粘贴到底部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！