时间戳

首页 > 解决方案 > Dompdf 相对/绝对定位项目的百分比未按预期运行

css - Dompdf 相对/绝对定位项目的百分比未按预期运行

问题描述

我在 laravel 中使用 dompdf，我的 PDF 中有一部分需要使用传递到刀片中的变量来创建图形。

我有一个计算将该变量转换为其最大数量的百分比：

$bar_percentage = (($bar - 5) * 100) / (20);

它的结果是，我有一个百分比数字，我需要在条形图中创建条形的高度。当我们直接使用 wkhtmltopdf 时，我以前使用 flexbox 的方式有所不同，但是跨环境存在问题，因此我们添加了 dompdf，我需要重构 pdf 刀片以使用表。我的想法是使用 3 行表创建图表的背景，并将条绝对定位在其中，如下所示：

  <div class="graph-container">
    <div class="bar" style="height:<?= $bar_percentage; ?>%"></div>
    <table>
      <tr>
        <td style="background-color: green;"></td>
      </tr>
      <tr>
        <td style="background-color: yellow;"></td>
      </tr>
      <tr>
        <td style="background-color: red;"></td>
      </tr>
    </table>
  </div>

然后将条绝对定位在表格内：

<style>
  .graph-container {
    width: 300px;
    height: 300px;
    position: relative;
  }

  .graph-container table td {
    height: 100px;
    width: 100px;
    padding: 0;
    margin: 0;
    position: absolute;
    top: 0;
    left: 0;
  }
  
  .bar {
    position: absolute;
    bottom: 0;
    left: 30px;
    width: 30px;
    background-color: black;
  }
</style>

但是发生了一些非常奇怪的事情。首先，“底部”将表格和栏都放在下面graph-container（但不是在 的graph-container父元素的底部，甚至低于那个！）

此外，栏的高度应该是高度的百分比，graph-container但是当我将该百分比设置为 100% 时，它比图形容器大得多，而且我无法弄清楚它将百分比与哪个元素进行比较！ ！

欢迎任何帮助！谢谢你。

Dompdf 和绝对/相对定位绝对是一件奇怪的事情，但我不知道如何解决它。如果我能确保条的高度至少是正确高度的百分比，那么我可以将它破解到正确的位置，但条的大小也是不正确的。

标签： csslaravelwkhtmltopdfdompdf

解决方案

这是 DomPdf 的问题，只有 px 可用查看文档。

推荐阅读