Css DOMPDF内部分页符：避免；属性在pdf的开头留有空白

在我的代码中，我试图向pdf添加一个外部边框框架，但当我这样做时，我的pdf的内容会在两个边框之间中断，并在第二页中继续。为了克服这个问题，我在内部使用了分页符：避免；属性。但这导致了一个新的奇怪问题，它将第一页保留为空白（无边框），并将整个内容添加到pdf的第二页（有边框）

我无法理解我做错了什么

下面我将详细介绍虚拟代码片段-

<style type="text/css">
@page { margin: 0px; }
body { margin: 0px; }
html { margin: 0px;}
.back-img
{
    background: url('ImageURL');
    background-position: top left;
    background-repeat: no-repeat;
    background-size: 100%;
    padding-top: 100px;
    padding-left: 100px;
    padding-right: 100px;
    width:100%;
    height:100%;
}
</style>
<div style="page-break-inside:avoid;" class="back-img">
    <div style="text-align: center;">
        <h1>Heading Text</h1>
        <br>
        <img src="ImgURL" height="100">
        <br><br>
        Some Text Here
        <br>
        Some Text Here.. Some text here..
        <br>
        Some Text Here
        <br><br>
        Some Text Here
        <br><br>
        3-4 lines of paragraph here
        <br><br>
        <img src="ImgURL" height="50">
        <br>
        Some text Here
        <br>
        Some Text Here
        <br>
        Some Text Here
    </div>
</div>

@第{页边距：0px；}
正文{margin:0px；}
html{margin:0px；}
.背img
{
背景：url（“ImageURL”）；
背景位置：左上角；
背景重复：无重复；
背景大小：100%；
填充顶部：100px；
左侧填充：100px；
右边填充：100px；
宽度：100%；
身高：100%；
}
标题文本





这里有一些文字


这里有一些文字。。这里有一些文字。。


这里有一些文字



这里有一些文字



此处有3-4行段落





这里有一些文字


这里有一些文字


这里有一些文字

Dompdf版本为0.7.0 PHP版本为7.0.18

---

非常感谢您的帮助。

这可能是因为您将容器div的宽度和高度设置为100%。Dompdf并不能很好地处理那些与页面边距相撞的元素。您有几个选项可以尝试解决此问题：

将容器的高度和宽度设置为略小于包含页面。如果您知道PT中的页面维度，并且可以为容器维度指定特定的长度，那么这就更容易了

将容器样式设置为固定位置元素。它不会影响文档流，并将应用于所有生成的页面。只需将页边距放在页面上，并对border元素应用负值即可

对于后者，请尝试以下方法：

<style type="text/css">
@page { margin: 100px; }
.back-img
{
  position: fixed;
  background: url('ImageURL');
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100%;
  top: -50px;
  right: -50px;
  bottom: -50px
  left: -50px;
}
</style>
<div class="back-img"></div>
<div style="text-align: center;">...</div>

@第{页边距：100px；}
.背img
{
位置：固定；
背景：url（“ImageURL”）；
背景位置：左上角；
背景重复：无重复；
背景大小：100%；
顶部：-50px；
右：-50px；
底部：-50px
左：-50px；
}
...

这些年来，我在这方面遇到了麻烦

一个似乎有效的解决方案是确保第一项是

page-break-inside: auto

在第一个元素上，然后

page-break-inside: avoid

在随后的任何元素上