我可以使用什么 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 编写时：<?phpuse 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{

  ...

  flex:auto;

  ...

}

并根据需要设置页眉和页脚的高度。

解决方案2：让页眉和页脚的高度各为100px，高度

.footer {

...

position:absolute;

bottom:0;

height:100px;

...

}

   .header{

height:100px;

}

.content{

height:calc(100% - 200px);

}

.page{

position:relative;

}

解决方案 3只需根据需要在页眉、页脚和内容类中提供固定高度

Answer 2

在普通 CSS中，您将设置页脚position: absolute;并将其放在底部。为了不隐藏东西，添加一个margin-bottom与页脚高度相同的页面。

.page {

  position: relative;

  margin-bottom: 100px;

}

.footer {

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  heigth: 100px;

}

Answer 3

您可以像这样设置绝对值：

#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;

 }

这在浏览器中呈现正常。

您还可以以编程方式呈现它们。请参阅此文档：https ://mpdf.:github.io/headers-footers/method-4.html

有趣的可能是使用文档中描述的@page 属性进行尝试： https ://mpdf.github.io/css-stylesheets/supported-css.html

@页

设置 'page-box' 的大小，通常与文档中的固定大小表一起使用，如 CSS2 @paged 媒体规范中所示。

我想它会是这样的：

 @page {

  //your CSS

 }