多个 headers 文本内容 - pdf 预览

Question

我为每页 pdf 生成了多个 headers (dompdf) Headers 是固定的，顶部：0px，宽度：100%。我的问题是，在第二页和第三页等等，我的 header 超过了我的文本内容而不是 margin-bottom。如果我将边距底部设置为 header，则不会发生任何事情（即使我为该文本内容设置了边距顶部）。我该怎么办？

CSS:

#header {
            position: fixed;
            top: 0px;
            width: 100%;
            margin-top: -180px;
        }

#header img {
            height: 175px;
            width: 1000px;
            float: right;
            margin-top: 85px;
            margin-right: 50px;
        }

HTML:

<div id="header">
    <img src="sd-logo.jpg"/>
</div>

谢谢。

Answer 1

使用固定位置元素时，您需要将其放置在文档的页边空白处，以防止与正文内容重叠。您试图通过指定负边距来做到这一点，但这些都没有经过全面测试。我建议使用负定位。

CSS:

#header {
  position: fixed;
  top: -180px;
  width: 100%;
}

#header img {
  height: 175px;
  width: 1000px;
  float: right;
  margin-top: 85px;
  margin-right: 50px;
}

HTML:

<div id="header">
  <img src="sd-logo.jpg"/>
</div>

另请注意，由于从文档流中删除了固定和绝对定位的内容，因此边距不会影响任何其他内容的呈现。

多个 headers 文本内容 - pdf 预览

Multiple headers over text content - pdf on preview

html

css

php

pdf

dompdf