dompdf：分页符后的上边距不起作用答案

【问题标题】：dompdf: top-margin after page break not workingdompdf：分页符后的上边距不起作用
【发布时间】：2014-04-04 20:57:40
【问题描述】：

我目前正在尝试使用 Wordpress 和（最新版本的）dompdf，但遇到了一个关于格式的烦人问题。

我的问题：生成的第二页似乎没有考虑主要内容的上边距，导致与我的徽标重叠。可以查看生成的PDFunder this link。

生成 PDF 的相关代码如下（它还不完美，我想先解决问题）：

function ppt_pdf_output() {

// post-ID of referring page needed
$post=get_post($_POST['postid']);

$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
body {
    margin: 30px 0 0 0;
    font-family:sans-serif;
    text-align:left;
}

img {
    margin: 15px 0;
}   

#header,
#footer {
  position: fixed;
  left: 0;
    right: 0;
    color: #aaa;
    font-size: 0.9em;
    line-height:1.2em;
}

#header {
  top: -30px;
    /*border-bottom: 0.1pt solid #aaa;*/
}

#footer {
  bottom: 0;
  border-top: 0.1pt solid #aaa;
}

#header table,
#footer table {
    width: 100%;
    border-collapse: collapse;
    border: none;
    text-align: center;
    color: #000;
    font-size: 24px;
}

.entry-content {
    margin: 100px auto 35px auto;
    top: 0; left: 0; bottom: 0; right: 0;
    background-color: #d1d977;
    width:90%; height:auto;
}

.entry-title {
    font-size: 18px;
    text-align: center;
}

#header td,
#footer td {
  padding: 0;
    width: 50%;
}

#footer .page-number {
  text-align: center;
}

.page-number:before {
  content: "Seite " counter(page);
}

.gallery-item {
display:inline-block;
}

br[style] {
display:none;
}

.gallery + p {
clear:left;
}

</style>
</head>
<body><div id="header">
  <table>
    <tr>
      <td>ANTRAG</td>
      <td style="text-align: right;"><img src="path/to/logo.png" /></td>
    </tr>
  </table>
</div>

<div id="footer">
  <div class="page-number"></div>
</div>';
$output .='
<!--<h1 class="entry-title">'. $post->post_title .'</h1>-->
<div class="entry-content">' . 
    apply_filters('the_content',$post->post_content) . '</div>';

$output .= '</body></html>';            

return $output;
}

如您所见，第一页上的格式是应有的（或至少如我所愿），但在分页后内容区域（出于可视化原因提供绿色背景）只是从页面的开头开始，无论我给出哪个数字。

有人知道如何解决这个问题吗？我已经为此工作了无数小时，只是现在不知道该怎么做。

任何帮助将不胜感激。

亲切的问候
奥利

更新：当然，我只是找到了this solution。我会试试这个，看看能不能解决这个问题。

UPDATE2：仍然没有运气。我现在坚持使用以下代码（可以在前面提供的链接下找到输出）：

function ppt_pdf_output() {

// post-ID of referring page needed
$post=get_post($_POST['postid']);

$output = '<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>'.$post->post_title.'</title>
<style>
@page {
    margin: 120px 50px 80px 50px;}  

#header {
    position: fixed;
    top: -82px;
    width: 100%;
    height: 109px;
    background: #aaa url("path/to/logo.png") no-repeat right;
}

#content {
    width: 100%;
    height: 85%;
    background-color: #d1d977;
}

footer {
    position: fixed;
    bottom: -65px;
    height: 30px;
    background-color: #333399;
}

footer .page-number {
    text-align: center;
}

.page-number:before {
    content: "Seite " counter(page);
}

br[style] {
display:none;
}
</style>
</head>
<body><div id="header">
  <h2>ANTRAG</h2>
</div>

<footer>
  <div class="page-number"></div>
</footer>';
$output .='<h1>'. $post->post_title .'</h1>
<div id="content">' .
    apply_filters('the_content',$post->post_content) . '</div>';
$output .= '</body></html>';

return $output;
}

它看起来很脆弱。例如，一旦我更改了 h1 元素的字体大小，它就会被徽标重叠。分页符之后，看起来还不错，但这似乎只是巧合——只要我更改字体大小或文本，文本就会再次重叠。绝对定位会改变什么吗？或者你有任何其他提示来解决这个烦人的问题吗？任何类型的边距似乎也不起作用。

【问题讨论】：

仅供参考，通过查看完整的 HTML 文档而不是生成 HTML 的 PHP，在 dompdf 中调试布局问题更容易。

标签： dompdf

【解决方案1】：

你在正确的轨道上。如您所见，当一个元素跨页面拆分时（如您的内容区域一样），一些格式信息不会遵循。这是设计使然。

正确的方法是来定义页边距，使它们足够大以容纳您的页眉/页脚内容并将页眉/页脚放入该空间。然后内容将填充文档的“正文”（即页边距内的空间）。这是您尝试过的，但您没有为标题提供足够的空间。页眉位于页边距内 82 像素，但页眉的高度为 109 像素。因此，任何具有小边距的内容仍将位于标题下方。

试试这个：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <title>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</title>
  <style>
  @page {
    margin: 120px 50px 80px 50px;
  }

  #header {
    position: fixed;
    top: -115px;
    width: 100%;
    height: 109px;
    background: #aaa url("path/to/logo.png") no-repeat right;
  }

  #content {
    background-color: #d1d977;
  }

  footer {
    position: fixed;
    bottom: -65px;
    height: 30px;
    background-color: #333399;
  }

  footer .page-number {
    text-align: center;
  }

  .page-number:before {
    content: "Seite " counter(page);
  }

  br[style] {
    display:none;
  }
  </style>
</head>
<body>
  <div id="header">
    <h2>ANTRAG</h2>
  </div>

  <footer>
    <div class="page-number"></div>
  </footer>

  <h1>"Kaffeefahrten" in Bornheim: hart durchgreifen, Senioren vor Betrügern schützen</h1>

  <div id="content">
    ...
  </div>
</body>
</html>

请注意，您也不必为内容元素指定任何高度/宽度（除非您想进一步限制它使用的空间）。

使用 CSS3，您可以使用原始样式并通过应用 box-decoration-break 属性重新使用边距。然而，在撰写本文时，dompdf 尚不支持此属性。

【讨论】：