Question

我正在尝试使用页眉，页脚和内容生成报告。页眉和页脚工作正常，但内容div的文本突破高于我想要的。 See the image。我真的不明白为什么页面打破这么高。

这是CSS代码：

@page { 
  margin: 180px 50px; 
}

#header { 
  position: fixed; 
  left: 0px; 
  top: -150px; 
  right: 0px; 
  height: 150px; 
  text-align: left; 
}

#footer { 
  position: fixed; 
  left: 0px; 
  bottom: -180px; 
  right: 0px; 
  height: 80px; 
  text-align: right; 
  background-color: lightblue 
}

#footer .page:after { 
  content: counter(page, upper-roman); 
}

#content { 
  padding-left: 10mm; 
  padding-right: 5mm; 
  line-height: 6mm; 
  background-color: lightgreen; 
  height: 850px;
}
#logo { 
  height: 4cm; 
}
#head_text { 
  display: inline-block; 
  line-height: 6mm; 
  padding-top: 15px; 
}

这是HTML：

<html>
  <head>
    <style>
      '.$css.'
    </style>
  </head>
  <body>

    <div id="header">
      '.$header.'
    </div>

    <div id="footer">
      <p class="page">Página </p>
    </div>

    <div id="content">
      '.$content.'
    </div>

  </body>
</html>

有人可以帮忙解决这个问题吗？坦克！

Answer 1

如果您的DOMPDF_DPI设置为72，则180px的余量非常大。 DPI为72，提供从PX到PT的一对一转换（PDF中的原始单位）。由dompdf生成的PDF文档总是72 PPI。这转化为内容周围2.5英寸的边距。我认为你的意思不是那么多。

我看到的另一个问题是您在内容元素上设置了高度条件。你不是真的需要这个，我看到它在运行一些测试渲染时会引起一些问题。如果您希望您的内容背景具有特定颜色，那么我建议您在body元素上设置它，这是文档内容的真实范围。

尝试以下方法：

＆＃13;

@page { 
  margin: 180px 50px; 
}
#header { 
  position: fixed; 
  left: 0px; 
  top: -150px; 
  right: 0px; 
  height: 150px; 
  text-align: left; 
}

#footer { 
  position: fixed; 
  left: 0px; 
  bottom: -180px; 
  right: 0px; 
  height: 80px; 
  text-align: right; 
  background-color: lightblue 
}

#footer .page:after { 
  content: counter(page, upper-roman); 
}

body { 
  background-color: lightgreen; 
  height: 850px;
}
#content {
  padding-left: 10mm; 
  padding-right: 5mm; 
  line-height: 6mm; 
}
#logo { 
  height: 4cm; 
}
#head_text { 
  display: inline-block; 
  line-height: 6mm; 
  padding-top: 15px; 
}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
  <div id="header">
    HEADER
  </div>

  <div id="footer">
    <p class="page">Página </p>
  </div>

  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p>
  </div>
</body>
</html>

＆＃13;

DOMPDF分页符

1 个答案: