Print: How to stick footer on every page to the bottom?

Question

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:

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.

score 0 · Accepted Answer · answered Feb 28 '17 at 10:35

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

score 0 · Answer 2 · answered Mar 02 '17 at 18:34

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
}

Print: How to stick footer on every page to the bottom?

2 Answers2

Linked