Print: How to stick footer on every page to the bo

问题:

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.

Here is my 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;
}

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

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

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

Sidenotes:

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

So is it possible in any way to achieve this with plain CSS? If not, I would also build some logic to fill all the empty space above the footer until the page reaches its max size.

回答1:

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

to this:

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;

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

回答2:

In Electron you have vh fully supported (see http://caniuse.com/#feat=viewport-units).

Just use something like this:

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


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