Print: How To Stick Footer On Every Page To The Bottom?

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:

Solution 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

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