0

Dompdfを使用してpdfを生成しようとしています。生成されたpdfの設計用に次のスクリプトがあります。

<html>
<head>
<style>
@page { margin: 180px 50px; }
#header { position: fixed; left: 0px; top: -180px; right: 0px; height: 120px; background-color:  orange; text-align: center; }
#footer { position: fixed; left: 0px; bottom: -180px; right: 0px; height: 150px; background-color: lightblue; }
#footer .page:after { content: counter(page, upper-roman); }
</style>

<body>
      <div id=\"header\">

     <h1>Charlie Sheen</h1>
     </div>

      Hi, This is Charlie Sheen <br>

    <p> Winning </p>
   <p> Winning </p>
  <p> Winning </p>
   <p> Winning </p>
    <p> Winning </p>
     <p> Winning </p>
      <p> Winning </p>

   <div id=\"footer\">
 <p class=\"page\">Page </p>
 </div>
 <div id=\"content\">
 <p>the first page</p>
 <p style=\"page-break-before: always;\">the second page</p>
 </div>                  

 </body>
</html>

ここに画像の説明を入力

PDFを生成すると、上の画像のようになります。今私の問題は、コンテンツを今よりも少し上から始めたいということです。上の画像に気がつけば「こんにちは、チャーリー・シーンです」という一文が……これは少し上から始めてほしい。スタイル内に次のコードを追加しようとしましたが、機能しません。

#content { position: fixed; margin-top: 0px;}

コンテンツを少し上から始めるのを手伝ってくれませんか？

前もって感謝します ：）

4

2 に答える 2

0

の余白を変更しても、ページのずっと下にある#contentため、違いはありません。#content

p私は最初の文をタグで包むことを検討します

<p>Hi, This is Charlie Sheen</p>

于 2011-12-30T02:15:11.087 に答える
0

を使用して、文書の上下から 180px で body をプッシュしています@page { margin: 180px 50px; }。ただし、ヘッダーの高さは 120px のみです。したがって、ヘッダーと本文の間には 60 ピクセルのスペースが自然に存在します。ヘッダーのサイズを大きくするか、@page余白を小さくする必要があります。

<html>
<head>
    <style>
        @page { margin: 120px 50px; }
        #header { position: fixed; left: 0px; top: -120px; right: 0px; height: 120px; background-color:  orange; text-align: center; }
        #footer { position: fixed; left: 0px; bottom: -120px; right: 0px; height: 150px; background-color: lightblue; }
        #footer .page:after { content: counter(page, upper-roman); }
    </style>

<body>
    <div id="header">
        <h1>Charlie Sheen</h1>
    </div>

    <div id="footer">
        <p class="page">Page </p>
    </div>

    <div id="content">
        <p>Winning!</p>
        <p style="page-break-before: always;">Winning!</p>
    </div>
</body>
</html>

(元のコードを少しクリーンアップしました。)

于 2012-01-03T20:09:54.333 に答える