2

dompdf からの pdf の作成に小さな問題があります。HTMLページのヘッダー位置:ページのヘッダーにコンテンツが重なっている問題を修正しました。ページのコンテンツが動的に読み込まれます。

4

1 に答える 1

8

配置されたコンテンツは現在、プライマリ コンテンツ コンテナまたはbody要素に従って配置されています。オーバーラップがないように、ページに余白を追加してから、コンテンツを負の位置に配置して本文の外側に移動します ( #header { position: fixed; top: -50px; left: 0px; right: 0px; height: 50px; })。

例えば：

<html>
<head>
  <style>
    @page { margin: 50px; }
    body { background-color: #c0ccff; padding: 1em; }
    #header { position: fixed; top: -50px; left: 0px; right: 0px; height: 50px; background-color: orange; padding: .5em; text-align: center; }
  </style>
</head>
<body>
  <div id="header">HEAD</div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor gravida enim, id sollicitudin eros ullamcorper a. Cras vitae convallis dolor. Maecenas eget fermentum magna. Donec gravida neque vel sapien congue consequat. Nulla facilisi. Sed volutpat dui et nibh posuere, eu malesuada arcu congue. Cras vehicula elit eros, non tristique leo congue quis. Morbi aliquam scelerisque augue, eu sodales dolor. Integer a commodo nibh. </p>
  <div style="page-break-before: always;"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut tempor gravida enim, id sollicitudin eros ullamcorper a. Cras vitae convallis dolor. Maecenas eget fermentum magna. Donec gravida neque vel sapien congue consequat. Nulla facilisi. Sed volutpat dui et nibh posuere, eu malesuada arcu congue. Cras vehicula elit eros, non tristique leo congue quis. Morbi aliquam scelerisque augue, eu sodales dolor. Integer a commodo nibh. </p>
</body>
</html>
于 2013-10-08T17:27:38.927 に答える