我可以使用哪种css替代方法来支持不支持的margin-top：auto，使用mpdf在a4页上模拟页脚？

Question

我正在尝试使用mpdf从我的primitive wyswyg到pdf生成1：1 a4页面。因此，使用此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;
}

应用于此HTML + JS：https://jsitor.com/FWvNJa7XN如您所见，至少在Web浏览器上，使用div页脚上的margin-top：auto，我能够将页脚粘贴在每个页面的底部。

但是当我尝试使用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();

在Firefox上，渲染的是这个（包括编辑器div）：https://i.imgur.com/UJldBr9.png

但是，使用mpdf，结果不是预期的：https://www.docdroid.net/vP4QALq/mpdf.pdf

因此，如何尝试在mpdf上呈现1：1？

Answer 1

我不知道这个pdf库，但是您可以尝试：

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