It paginates wrong
There is an extra blank page at the end
The content ends on page three and the PDF has four pages. The last one is empty and nothing you delete from the content seems to remove it.
What is actually happening
Something extends a fraction of a millimetre past the end of the last page. A trailing margin that collapses on screen but not in pagination, a clearfix with height, or a wrapper whose height is set to 100% of a page that is already full. The layout sees content past the boundary and starts a page for it.
Confirming it is this and not something that looks like it
Put a visible outline on the last element in the body. If the outline appears alone on the final page, you have found the thing occupying it.
The fix
Zero the trailing margin on the last child and check for elements with a set height near the end of the document. The specific culprit varies; the technique for finding it does not.
/* The usual suspect: a bottom margin that has nowhere to collapse into. */
.document > *:last-child {
margin-bottom: 0;
}
/* A clearfix that occupies a line box even when empty. */
.clearfix::after {
content: "";
display: table;
clear: both;
/* Without this it is a zero-width line box with a line-height of its own. */
line-height: 0;
height: 0;
}
/* A full-height wrapper on a page that is already full starts another one. */
.page {
min-height: 0;
}If that was not it
These produce the same symptom often enough to be worth ruling out before assuming the fix above did not work.
- break-after: page on the last section, which asks for a page that then has nothing on it
- A footer positioned with a top margin rather than being placed by the page box
- Whitespace between elements in a template loop, which becomes a real line box
- A hidden element with display: block rather than display: none
Frequently asked
Does this happen with every rendering engine?
The behaviour behind it is not specific to one tool. Something extends a fraction of a millimetre past the end of the last page. Anything rendering HTML to a paged medium has to make the same decision, so the fix travels with you if you change how the render happens.
Will this show up as an error in my logs?
No, and that is what makes it expensive. A document that renders wrong is still a successful render as far as every log line is concerned. It is found by someone opening the file, which is usually the customer.
Related failures
Problems people arrive at from the same starting point, or mistake for this one.
Page breaks land in the wrong place
Nothing told the layout where it is allowed to break, so it breaks wherever the content runs out of page.
Table headers do not repeat on the next page
Header repetition is driven by table sectioning, not by styling.
Content is cut off at the right edge of the page
The element is wider than the page's content box and has nothing telling it to wrap.
Page numbers are missing or all show 1
Page numbers come from the footer template's special classes, not from CSS counters in the document body.
Page margins are ignored in a generated PDF
Same collision as page size: a margin set in the render options and a margin set in an @page rule, with the engine picking one.
CSS for paged documents, and what actually works
Which parts of the paged media specification a browser-based render implements.
Everything that goes wrong, by category
The full list, grouped by where in the pipeline it breaks.
Paste your markup and see the rendered document, without signing up.