How to Add PDF Pages When HTML Content Overflows

Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.

HTML that is taller than one sheet normally becomes multiple PDF pages automatically. You do not append pages with JavaScript. Let the document remain in normal flow, remove print-time height and overflow constraints, define the paper with @page, and add page-break rules only where a deliberate boundary is needed. Then verify the actual PDF at its target paper size.

Why overflowing HTML usually creates more PDF pages

When a browser prints a document, its print layout fragments the document into as many pages as the content requires. A paragraph, list or section that extends beyond the printable area should continue on the next page. The most common reason content is cut off is not a missing “add page” command; it is a screen-layout constraint that still applies during printing.

#	Preview	Product	Price
1		PDF Extra 2024| Complete PDF Reader and Editor | Create, Edit, Convert, Combine, Comment, Fill &...	$99.99	Buy on Amazon
2		MobiPDF Lifetime - Professional PDF Editor for Windows | Edit, Sign & Convert PDFs | Best Adobe...	$99.99	Buy on Amazon
3		Scrivar PDF Pro - Organize, Edit, Compress, Convert, Merge, eSign, OCR & 30+ tools | Lifetime...	$75.00	Buy on Amazon

Typical causes include a fixed height, max-height, overflow: hidden or overflow: auto on the printable container. Absolutely positioned children, viewport-width assumptions and a print stylesheet that preserves a screen-sized panel can also prevent normal fragmentation.

• Keep printable content in ordinary document flow.
• Use @media print to remove navigation and screen-only controls.
• Set paper dimensions and margins with @page.
• Use break-inside: avoid selectively for compact groups.
• Use break-before: page only for intentional section boundaries.

Build a print stylesheet that can grow

Give the printable region an automatic height and visible overflow in print. The following pattern hides screen controls, defines A4 portrait pages and keeps small groups together:

#1 Best Overall

PDF Extra 2024| Complete PDF Reader and Editor | Create, Edit, Convert, Combine, Comment, Fill & Sign PDFs | Lifetime License | 1 Windows PC | 1 User [PC Online code]

• EDIT text, images & designs in PDF documents. ORGANIZE PDFs. Convert PDFs to Word, Excel & ePub.
• READ and Comment PDFs – Intuitive reading modes & document commenting and mark up.
• CREATE, COMBINE, SCAN and COMPRESS PDFs
• FILL forms & Digitally Sign PDFs. PROTECT and Encrypt PDFs
• LIFETIME License for 1 Windows PC or Laptop. 5GB MobiDrive Cloud Storage Included.

$99.99

Buy on Amazon

@media print {
  .site-header,
  .toolbar,
  .site-footer {
    display: none;
  }

  .print-content {
    height: auto;
    max-height: none;
    overflow: visible;
  }

  .keep-together {
    break-inside: avoid;
  }

  .new-section {
    break-before: page;
  }
}

@page {
  size: A4 portrait;
  margin: 15mm;
}

@media print changes only the printed/PDF presentation, so your on-screen layout can retain its normal navigation and interactive controls. The @page rule sets sheet size, orientation and margins. Browser support for portions of paged-media CSS varies, so inspect the resulting PDF in the browser and rendering pipeline your readers use.

Remove the constraints that clip content

Override every constraint on the print path, not only the outermost element. For example:

@media print {
  .app-shell,
  .article-panel,
  .article-panel > .content {
    height: auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
  }
}

If a child is absolutely positioned, it may not contribute to the parent’s height. Move printable content back into normal flow for print, or provide a print-only layout in which the content is positioned statically.

Keep small elements together without forcing blank pages

break-inside: avoid asks the browser not to split a box between pages. It is useful for a short card, figure with caption or compact list:

@media print {
  .invoice-summary,
  figure,
  .short-list {
    break-inside: avoid;
  }
}

This declaration does not create a new page by itself. If the element is taller than the available page area, the browser may still need to fragment it. Apply it selectively: placing it on every container can create large blank areas and awkward pagination. The older page-break-inside property remains a compatibility alias, but new styles should use break-inside.

Start a chapter or report section on a new page

For deliberate boundaries, put break-before: page on the heading or section that should begin on a fresh sheet:

@media print {
  .report-section {
    break-before: page;
  }
}

You can use the corresponding after-break rule when the break belongs to the preceding element. Do not add a forced break after every block. Automatic pagination is generally better at using the remaining space, while explicit breaks are appropriate for chapters, appendices, title pages or other editorial boundaries.

Check the print preview and the real PDF

1. Open the page in the browser and choose Print (or press Ctrl/Cmd+P).
2. Choose the required destination, paper size and orientation.
3. Inspect every page in preview. Look for clipped bottoms, missing images, split headings and unexpected blank sheets.
4. Disable browser-generated headers and footers if they consume space you need. Their presence depends on the print dialog and available margins.
5. Save the PDF and open the saved file, rather than relying only on preview.
6. Repeat at each target paper size. A layout that fits A4 can paginate differently on Letter.

Margins affect both authored content and browser-added headers or footers. Chrome can show its own print headers and footers alongside your page margins when there is room; the print dialog can turn those generated items off. CSS-generated content in page margins is also version-sensitive: Chrome for Developers documented margin-box support arriving in Chrome 131 (article published October 30, 2024). Treat that feature as pipeline-specific and verify it in the Chrome version you deploy.

Rank #2

MobiPDF Lifetime - Professional PDF Editor for Windows | Edit, Sign & Convert PDFs | Best Adobe Acrobat Pro Alternative | Lifetime License

• Edit PDFs with Ease. Modify text, images, and layouts directly within your PDF documents.
• Convert & Organize. Export PDFs to Word, Excel, or ePub, and organize files with ease.
• Read & Annotate. Enjoy intuitive reading modes and powerful tools to comment, highlight, and mark up PDFs.
• Create & Manage PDFs. Create new PDFs, combine multiple files, scan documents, and compress for easy sharing.
• Fill & Sign Forms. Complete forms and digitally sign documents with secure e-signature tools.

$99.99

Buy on Amazon

Automate PDF creation with Puppeteer

Puppeteer’s Page.pdf() renders with the print CSS media type by default. That means your @media print rules are used unless you explicitly emulate screen media first.

import puppeteer from 'puppeteer';

const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto('https://example.com/report', { waitUntil: 'networkidle0' });
await page.pdf({
  path: 'report.pdf',
  format: 'A4',
  printBackground: true,
  margin: {
    top: '15mm',
    right: '15mm',
    bottom: '15mm',
    left: '15mm'
  }
});
await browser.close();

Use page.emulateMediaType('screen') before page.pdf() only when you intentionally want screen styles in the PDF:

await page.emulateMediaType('screen');
await page.pdf({ path: 'screen-styled.pdf', format: 'A4' });

Puppeteer also modifies colors for print by default. If exact colors matter, its documentation points to -webkit-print-color-adjust; test the final file because color handling depends on the browser and output settings.

Choose automatic flow, forced breaks or automation

Troubleshoot clipped or awkward output

The last lines disappear

Inspect ancestors for fixed or maximum heights and non-visible overflow. Add print overrides for each affected wrapper. Also check absolutely positioned children, which may extend outside the measured flow.

A section is squeezed onto one page

Remove screen-only sizing and check for a flex or grid child with a constrained height. Let the print version use an auto-sized block. Do not try to solve this with more page breaks; a forced break cannot recover content hidden by overflow.

Every card starts on a new page

Search for inherited or broadly applied break-before, break-after or break-inside: avoid. Restrict rules to the specific headings or short components that need them.

A heading is stranded at the bottom

Keep the heading with the following short block where practical, for example by wrapping both in a compact container with break-inside: avoid. Avoid applying that rule to an entire long chapter.

Images or fonts change pagination

Wait for assets before generating the PDF. In Puppeteer, navigate with an appropriate readiness condition and ensure images have loaded before calling page.pdf(). Different font availability changes line wrapping and therefore page count; install and load the intended fonts in the rendering environment.

Rank #3

Scrivar PDF Pro - Organize, Edit, Compress, Convert, Merge, eSign, OCR & 30+ tools | Lifetime License

• EVERY PDF TOOL UNLOCKED - 30+ tools in one app: edit text and images, convert, merge, split, compress, sign, OCR, redact, watermark, batch process, and more. No feature gates, no upsells, nothing held back.
• PAY ONCE, OWN FOREVER — A one-time purchase, not a subscription. Other apps runs $240/year — Scrivar is yours for life, with free updates included.
• UNLIMITED eSIGN, BUILT IN — Send contracts and forms for signature and track every step. Recipients sign in their browser with no account or app needed. Replace DocuSign and save hundreds a year.
• PC, MAC, AND WEB — Install on any Win 10/11 PC or macOS 11+ Mac (Intel or Apple Silicon), or work in your browser at scrivar.com. Same tools, same account, everywhere you work.
• OCR + FULL OFFICE CONVERSION — Turn scanned documents into searchable, selectable text, and convert PDFs to and from Word, Excel, and PowerPoint with formatting kept intact.

$75.00

Buy on Amazon

Headers or footers overlap the content

Turn off browser-generated print headers and footers in the print dialog, or increase @page margins. Check the saved PDF because preview and destination settings can differ.

The page size or margin is ignored

Confirm the print destination, orientation and scaling settings. Some paged-media descriptors have varying support, particularly in older browsers. Test the exact browser and PDF pipeline used in production.

Or skip the browser setup

ScreenshotNeo provides a website screenshot API and MCP server when you need a hosted capture instead of maintaining a browser. Its PDF endpoint supports paper size, margins, landscape mode and page ranges, along with waiting for a selector, delay or network idle. Before capture it accepts the cookie or consent banner like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets; each cleanup step can be turned off.

Only clean shots are billed. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and each response reports the result through the X-Page-Verdict and X-Billed headers. An MCP server lets Claude, Cursor and other MCP clients call take_screenshot, get_page_info and capture_pdf.

For the full parameter list, see the ScreenshotNeo documentation. A direct request looks like this:

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

The same request in Python:

import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)

And in Node.js:

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);

Every feature is available on every plan. The Free plan includes 1,000 shots per month with no card; paid plans start at $5 for 3,000 shots. Create a free ScreenshotNeo account to try it without a card.

FAQ

Do I need JavaScript to add PDF pages?

No. Browser print pagination handles overflow from normal-flow HTML. JavaScript is useful only when you are automating the rendering process or changing content before printing.

Can I guarantee identical page counts in every browser?

No. Fonts, paper settings, print controls and support for paged-media features can change line wrapping and fragmentation. Standardize the browser, assets and print settings for automated output, then inspect representative PDFs.

Should I use page-break-inside in new code?

Prefer break-inside. page-break-inside is deprecated, although browsers retain it as a compatibility alias.

Quick Recap

Bestseller No. 1

PDF Extra 2024| Complete PDF Reader and Editor | Create, Edit, Convert, Combine, Comment, Fill & Sign PDFs | Lifetime License | 1 Windows PC | 1 User [PC Online code]

READ and Comment PDFs – Intuitive reading modes & document commenting and mark up.; CREATE, COMBINE, SCAN and COMPRESS PDFs

$99.99

Bestseller No. 2

MobiPDF Lifetime - Professional PDF Editor for Windows | Edit, Sign & Convert PDFs | Best Adobe Acrobat Pro Alternative | Lifetime License

Edit PDFs with Ease. Modify text, images, and layouts directly within your PDF documents.; Convert & Organize. Export PDFs to Word, Excel, or ePub, and organize files with ease.

$99.99

Bestseller No. 3

Scrivar PDF Pro - Organize, Edit, Compress, Convert, Merge, eSign, OCR & 30+ tools | Lifetime License

$75.00

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.