CODEWITHSUNDEEP
csspdf-generationdompdf
Breno Macena
Breno Macena

Reputation: 449

DOMPDF page break

I'm trying to generate reports with header, footer and content. The header and the footer works fine, however the text of the content div breaks higher than I want. See the image. I really don't understand why the page is breaking so high.

This is the CSS code:

@page { 
  margin: 180px 50px; 
}

#header { 
  position: fixed; 
  left: 0px; 
  top: -150px; 
  right: 0px; 
  height: 150px; 
  text-align: left; 
}

#footer { 
  position: fixed; 
  left: 0px; 
  bottom: -180px; 
  right: 0px; 
  height: 80px; 
  text-align: right; 
  background-color: lightblue 
}

#footer .page:after { 
  content: counter(page, upper-roman); 
}

#content { 
  padding-left: 10mm; 
  padding-right: 5mm; 
  line-height: 6mm; 
  background-color: lightgreen; 
  height: 850px;
}
#logo { 
  height: 4cm; 
}
#head_text { 
  display: inline-block; 
  line-height: 6mm; 
  padding-top: 15px; 
}

And this is the HTML:

<html>
  <head>
    <style>
      '.$css.'
    </style>
  </head>
  <body>

    <div id="header">
      '.$header.'
    </div>

    <div id="footer">
      <p class="page">Página </p>
    </div>

    <div id="content">
      '.$content.'
    </div>

  </body>
</html>

Could anyone help to solve this problem? Tanks!

Upvotes: 0

Views: 4477

Answers (1)

BrianS
BrianS

Reputation: 13924

If your DOMPDF_DPI is set to 72 then a 180px margin is pretty expansive. A DPI of 72 gives a one-to-one translation from PX to PT (the native unit in a PDF). PDF documents produced by dompdf are always 72 PPI. That translates into 2.5 inches of margin around the content. I don't think you meant to pad your margins quite that much.

Another problem I see is that you've set a height condition on your content element. You don't really need this and I see it causing some problems as I run some test renders. If you want your content background to have a specific color then I'd recommend setting it on the body element, which is the true bounds of your document content.

Try the following:

@page { 
  margin: 180px 50px; 
}
#header { 
  position: fixed; 
  left: 0px; 
  top: -150px; 
  right: 0px; 
  height: 150px; 
  text-align: left; 
}

#footer { 
  position: fixed; 
  left: 0px; 
  bottom: -180px; 
  right: 0px; 
  height: 80px; 
  text-align: right; 
  background-color: lightblue 
}

#footer .page:after { 
  content: counter(page, upper-roman); 
}

body { 
  background-color: lightgreen; 
  height: 850px;
}
#content {
  padding-left: 10mm; 
  padding-right: 5mm; 
  line-height: 6mm; 
}
#logo { 
  height: 4cm; 
}
#head_text { 
  display: inline-block; 
  line-height: 6mm; 
  padding-top: 15px; 
}
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
  <div id="header">
    HEADER
  </div>

  <div id="footer">
    <p class="page">Página </p>
  </div>

  <div id="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus id erat blandit, auctor massa eu, aliquam lacus. Suspendisse justo ante, gravida vel diam quis, porta luctus nisi. Donec id enim sem. Sed et lobortis magna. Ut et dignissim augue. Cras quam libero, feugiat ac auctor eget, semper a augue. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse quis hendrerit ex. Phasellus auctor dolor sit amet nibh rhoncus sagittis. Sed quis odio sit amet purus feugiat malesuada.</p>
  </div>
</body>
</html>

Upvotes: 1

Related Questions