Fixing a Print Stylesheet That Produces Blank Pages or Cuts Off Content

The Problem

A page that looks correct in the browser produces a broken result when printed or exported to PDF via the browser's print dialog: an extra blank page appears at the end, a table row is split awkwardly across two physical pages, content that's clearly not meant for paper (a fixed navigation bar, a cookie banner, a "back to top" button) shows up in the printout, or a wide element gets cut off at the page's right edge. None of this shows up in normal screen use — it only appears in the print preview, which makes it easy to overlook during regular development and testing.

Why It Happens

Print uses an entirely separate rendering context that ignores viewport-based CSS entirely

The browser applies a distinct set of CSS rules when printing — governed by the @media print query and print-specific properties — rather than simply shrinking the on-screen layout to fit a page. Any layout that relies purely on @media screen or default styles without explicit print-specific rules gets whatever the browser's default print behavior happens to be for that markup, which is rarely what the page actually needs.

Fixed and sticky positioned elements don't behave the same way across a paginated print context

An element with position: fixed — a header that stays pinned while scrolling on screen — has no consistent meaning across multiple printed pages; different browsers handle this inconsistently, sometimes repeating the element on every page, sometimes clipping it, sometimes leaving an empty gap where it would have been.

Content taller than one printed page has to break somewhere, and without guidance the browser picks an arbitrary point

A table, a long list, or a block of text that spans more vertical space than one physical page can break at an arbitrary row or line boundary if nothing tells the browser where a break is acceptable — producing a split table row, a heading stranded at the bottom of a page with its content pushed to the next one, or similar visually broken pagination.

An extra blank page at the end is usually caused by a small overflow past the last full page's boundary

If the total content height is just slightly taller than an exact multiple of the page height — often due to a margin, a footer element, or trailing whitespace — the small remainder forces an entirely new page that contains almost nothing, a common and specifically diagnosable pattern rather than a random glitch.

The Fix

1. Hide screen-only chrome explicitly with a print stylesheet

@media print {
  nav, .sidebar, .cookie-banner, .back-to-top, button {
    display: none !important;
  }
}

Explicitly hiding navigation, sidebars, and interactive controls that have no purpose on a printed page removes the content nobody wanted to print in the first place, rather than leaving it to whatever the browser's default handling of those elements happens to produce.

2. Control page breaks explicitly around content that shouldn't be split

@media print {
  table, tr, .card {
    break-inside: avoid;
  }
  h1, h2, h3 {
    break-after: avoid; /* keep a heading with the content that follows it */
  }
  .section {
    break-before: page; /* force a clean page break before a major section */
  }
}

The break-inside, break-before, and break-after properties (the modern successors to page-break-inside and related properties, worth including both for older browser support) give the browser explicit instructions about where a break is and isn't acceptable, replacing arbitrary automatic breaking with deliberate, tested pagination.

3. Set explicit page dimensions and margins with the @page rule

@media print {
  @page {
    size: A4;
    margin: 1.5cm;
  }
  body {
    width: 100%;
    margin: 0;
  }
}

Defining the page size and margins explicitly, rather than relying on the browser's and printer driver's defaults to agree with the page's own layout assumptions, removes a common source of content being cut off at the page edge — particularly for layouts with a fixed pixel width that doesn't map cleanly to a physical page's printable area.

4. Diagnose an extra trailing blank page by checking total content height against the page height

@media print {
  .footer, .app-shell > *:last-child {
    margin-bottom: 0; /* remove trailing margin that can push content past a page boundary */
  }
  html, body {
    height: auto; /* avoid a fixed viewport height forcing extra space when printed */
  }
}

Checking the print preview specifically for trailing margins, a fixed height: 100vh that doesn't make sense outside a screen viewport, or an empty container at the end of the page is the direct way to find what's pushing content just past a page boundary — this is a measurable, fixable overflow, not a browser bug to work around blindly.

Why This Works

Each fix addresses a distinct aspect of how print rendering diverges from screen rendering. Explicitly hiding screen-only UI removes content that was never meant to appear on paper in the first place; explicit break controls replace arbitrary automatic pagination with deliberate, predictable breaks; defining page size and margins via @page ensures the layout's assumptions actually match the physical page being printed to; and checking for trailing overflow directly identifies the specific cause of an extra blank page rather than treating it as an unexplainable print quirk.

Conclusion

A broken print layout isn't a bug in the on-screen design — print is a genuinely separate rendering context with its own pagination, sizing, and positioning rules that a screen-only stylesheet never addresses. Hide screen-only chrome explicitly for print, use break-inside/break-before/break-after to control where content splits across pages, define page size and margins explicitly with @page, and diagnose a trailing blank page by checking for the specific margin or height overflow pushing content past the last full page.