Home/ Questions/Q 7014693
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T22:33:17+00:00

I am trying to generate pdf using Dompdf. I have the following script for

  • 0

I am trying to generate pdf using Dompdf. I have the following script for the design of my generated 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>

enter image description here

When I generate the PDF it looks like the image above. Now my problem is I want my content to start from a little upper than it starts from now. If you notice the image above there is a sentence “Hi, this is charlie Sheen”… I want this to start from a little upper. I have tried to add the following code inside the style but it doesn’t work:

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

Would you please kindly help me to get the content start from a little upper?

Thanks in Advance 🙂

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You’re pushing the body in 180px from the top and bottom of the document with @page { margin: 180px 50px; }. However, the height of your header is only 120px. So there will naturally be 60px of space between your header and body content. You should either increase the size of your header or decrease the @page margins.

    <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>

    (Your original code, cleaned up a bit.)

    • 0