What css alternative can I use to the non-supported margin-top:auto using mpdf to emulate footer on a4 pages?

Question

I am trying to generate 1:1 a4 pages from my primitive wyswyg to pdf using mpdf. So using this css:

#editor {
  background-color: gray;
  border: 1px black;
  padding: 1em 2em;
}

.page {
  background-color: white;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  /*padding: 10em 2em;*/
  width: 595px;
  height: 841px;
  display: flex;
  flex-direction: column;
}

.content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  padding-left: 2cm;
  padding-bottom: 2cm;
  padding-top: 2cm;
  outline-color: white;
}

.header {
  background-color: red;
  text-align: center;
}

.footer {
  background-color: darkgray;
  margin-top: auto;
  height: 100px;
  page-break-after:right;
}

.brasao {
  height: 60px;
  width: 60px;
}

#template {
  display: none;
}

Applied on this HTML + JS: https://jsitor.com/FWvNJa7XN As you can see, using margin-top:auto on div footer, at least on web browsers, I was able to stick the footers on the bottom of each page.

But when I've tried to write using mpdf :

<?php

use Mpdf\Mpdf;
use Mpdf\Output\Destination;

include 'vendor' . DIRECTORY_SEPARATOR . 'autoload.php';

$mpdf = new Mpdf();

 //via JS as I able to send each page outerHTML separated on hidden values
$pages = $_REQUEST['pages'];

$mpdf = new \Mpdf\Mpdf([
    'mode' => 'utf-8',
    'format' => 'A4',
    'margin_left' => 0,
    'margin_right' => 0,
    'margin_top' => 0,
    'margin_bottom' => 0,
    'margin_header' => 0,
    'margin_footer' => 0,
    'dpi' => 72
]);

$stylesheet = file_get_contents('redator.css');
$mpdf->WriteHTML($stylesheet, \Mpdf\HTMLParserMode::HEADER_CSS);
foreach ($pages as $page) {
    $mpdf->WriteHTML($page);
}
$mpdf->Output();

On firefox the rendered was this (including the editor div): https://i.imgur.com/UJldBr9.png

But, using mpdf, the result was not the expected: https://www.docdroid.net/vP4QALq/mpdf.pdf

So, How can try to render 1:1 on mpdf?

Answer 1

solution 1: you could add

.content{
  ...
  flex:auto;
  ...
}

and set height of header and footer as needed.

Solution 2: let the height of header and footer are 100px each and height

.footer {
...
position:absolute;
bottom:0;
height:100px;
...
}


   .header{
height:100px;
}

.content{
height:calc(100% - 200px);
}

.page{
position:relative;
}

solution 3 simply give fixed height in header, footer and content classes as required

Answer 2

I don't know this pdf library, but can you try:

.footer {
  background-color: darkgray;
  /* absolute position */
  position: absolute;
  /* stick to bottom */
  bottom: 0;
  /* give it full width */
  width: 100%;
  height: 100px;
  page-break-after:right;
}

.page {
  background-color: white;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  /*padding: 10em 2em;*/
  width: 595px;
  height: 841px;
  display: flex;
  flex-direction: column;
  /* make the header relative to your page element */
  position: relative;
}

Answer 3

you can set the value absolute like this:

#editor {
 background-color: gray;
 border: 1px black;
 padding: 1em 2em;
 }

 .page {
 background-color: white;
 border-style: solid;
 border-color: black;
 border-width: 1px;
 /*padding: 10em 2em;*/
 width: 595px;
 height: 841px;
 display: flex;
 flex-direction: column;
}

.content {
 word-wrap: break-word;
 overflow-wrap: break-word;
 white-space: normal;
 padding-left: 2cm;
 padding-bottom: 2cm;
 padding-top: 2cm;
 outline-color: white;
 }

.header {
 background-color: red;
 text-align: center;

}

.footer {
 background-color: darkgray;
 position:absolute;
 width:595px;
 top:817px;
 height: 100px;
 page-break-after:right;

}

.brasao {
 height: 60px;
 width: 60px;
 }

 #template {
 display: none;
 }

This renders ok in the browser.

You can also render them programmatically. See this document: https://mpdf.:github.io/headers-footers/method-4.html

Interesting might be to try it using the @page attribute described in the docs: https://mpdf.github.io/css-stylesheets/supported-css.html

@page

Sets the size of the ‘page-box’, which is usually used with a constant size sheet through the document, as in the CSS2 @paged media spec.

I suppose it would be something like:

 @page {
  //your CSS
 }

Answer 4

1) To Fixed Footer at the bottom replace below css with your css

 #editor {
  background-color: gray;
  border: 1px black;
  padding: 1em 2em;
}

.page {
  background-color: white;
  border-style: solid;
  border-color: black;
  border-width: 1px;
  /*padding: 10em 2em;*/
  width: 595px;
  height: 841px;
  display: flex;
  flex-direction: column;
  position:relative;
}

.content {
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  padding-left: 2cm;
  padding-bottom: 2cm;
  padding-top: 2cm;
  outline-color: white;
}

.header {
  background-color: red;
  text-align: center;
}

.footer {
  background-color: darkgray;
  margin-top: auto;
  height: 100px;
  page-break-after:right;
   width:inherit;
     position:absolute;
     bottom:0;
}

.brasao {
  height: 60px;
  width: 60px;
}

#template {
  display: none;
}

2) To generate A4 pages tried below code its working for me

$mpdf = new \Mpdf\Mpdf([
    'mode' => 'utf-8',
    'format' => 'A4'

]);