我可以使用什么 css 替代方案来替代不支持的 margin-top:auto 使用 mpdf

Question

我正在尝试使用 mpdf 从我的原始 wyswyg生成 1:1 a4 页面到 pdf。所以使用这个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 如您所见，在 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

解决方案1： 您可以添加.content{&nbsp; ...&nbsp; flex:auto;&nbsp; ...}并根据需要设置页眉和页脚的高度。解决方案2：让页眉和页脚的高度各为100px，高度.footer {...position:absolute;bottom:0;height:100px;...}&nbsp; &nbsp;.header{height:100px;}.content{height:calc(100% - 200px);}.page{position:relative;}解决方案 3只需根据需要在页眉、页脚和内容类中提供固定高度

Answer 2

在普通 CSS中，您将设置页脚position: absolute;并将其放在底部。为了不隐藏东西，添加一个margin-bottom与页脚高度相同的页面。.page {&nbsp; position: relative;&nbsp; margin-bottom: 100px;}.footer {&nbsp; position: absolute;&nbsp; bottom: 0;&nbsp; left: 0;&nbsp; width: 100%;&nbsp; heigth: 100px;}

Answer 3

您可以像这样设置绝对值：#editor {&nbsp;background-color: gray;&nbsp;border: 1px black;&nbsp;padding: 1em 2em;&nbsp;}&nbsp;.page {&nbsp;background-color: white;&nbsp;border-style: solid;&nbsp;border-color: black;&nbsp;border-width: 1px;&nbsp;/*padding: 10em 2em;*/&nbsp;width: 595px;&nbsp;height: 841px;&nbsp;display: flex;&nbsp;flex-direction: column;}.content {&nbsp;word-wrap: break-word;&nbsp;overflow-wrap: break-word;&nbsp;white-space: normal;&nbsp;padding-left: 2cm;&nbsp;padding-bottom: 2cm;&nbsp;padding-top: 2cm;&nbsp;outline-color: white;&nbsp;}.header {&nbsp;background-color: red;&nbsp;text-align: center;}.footer {&nbsp;background-color: darkgray;&nbsp;position:absolute;&nbsp;width:595px;&nbsp;top:817px;&nbsp;height: 100px;&nbsp;page-break-after:right;}.brasao {&nbsp;height: 60px;&nbsp;width: 60px;&nbsp;}&nbsp;#template {&nbsp;display: none;&nbsp;}这在浏览器中呈现正常。您还可以以编程方式呈现它们。请参阅此文档：https ://mpdf.:github.io/headers-footers/method-4.html有趣的可能是使用文档中描述的@page 属性进行尝试： https ://mpdf.github.io/css-stylesheets/supported-css.html@页设置 'page-box' 的大小，通常与文档中的固定大小表一起使用，如 CSS2 @paged 媒体规范中所示。我想它会是这样的：&nbsp;@page {&nbsp; //your CSS&nbsp;}