The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Put the footer after the printable content in the HTML, hide it on screen, and show it in an @media print rule. That prints the footer once, after the content, on the final page of the document. It does not pin the footer to the bottom edge of a partly filled page. Ordinary CSS paged-media page selectors do not provide a portable way to target only the last page; if bottom-edge placement is essential, use a page-aware PDF workflow and test the exact renderer.
Print a footer once, after the document content
For the common requirement—an end note, signature, or “end of document” label that should print once after the content—place a footer element immediately after the printable content in the DOM. Hide it by default and make it visible in print media. Because it remains in normal document flow, the browser lays it out after the content rather than repeating it on every page.
<main class="print-document">
<h1>Report</h1>
<p>Printable document content goes here.</p>
</main>
<footer class="print-only-footer">
End of document
</footer>.print-only-footer {
display: none;
}
@media print {
.print-only-footer {
display: block;
break-inside: avoid;
margin-top: 1rem;
}
}Keep the footer outside the <main> if that element represents only the report content, and keep it after all content that must precede the footer. The print media query switches these styles on for print output; the footer stays hidden in the ordinary screen view. The break-inside: avoid declaration asks the renderer not to split the footer across pages. It does not reserve space for it at the bottom of the last page, nor does it guarantee a particular page break if there is not enough room.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Use an appropriate footer element
Use <footer> for document-level closing information such as a signature line or final note. If the content is not semantically a footer, a regular element such as <div class="print-only-footer"> works with the same CSS. The positioning behavior comes from where the element sits in the document flow, not from the element name.
#1 Best Overall
- 1 ream (500 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
Prevent screen-only content from printing
Apply complementary print rules to navigation, buttons, or other interface elements that should not appear on paper. For example:
@media print {
.screen-only {
display: none !important;
}
}Use this only for elements that genuinely should be omitted from the printed document. Hiding an element can change pagination, so verify the resulting page breaks after applying print-specific visibility rules.
Understand what “last page” means in CSS
A footer at the end of normal document flow appears after the document’s content in the printed sequence. If the content ends halfway down a sheet, the footer will normally follow it there, with blank space below. If there is too little room for the footer, the renderer may move it to a subsequent page. That is different from anchoring a footer to a fixed position at the bottom of the final sheet.
Rank #2
- HP Papers is sourced from renewable forest resources and has achieved production with 0% deforestation in North America. Each ream is wrapped in a polyurethane coated paper wrapper to protect the cut sheets from moisture damage
- Sheet size – 8.5 x 11; Thickness – 20 pounds; Brightness – 92 bright white
- HP Copy&Print20 20 pounds printer paper is Forest Stewardship Council (FSC) certified and contributes toward satisfying credit MR1 under LEED (Leadership in Energy and Environmental Design)
- All HP Papers provide premium performance on HP equipment, as well as on all other printer and copier equipment; 100% satisfaction guaranteed; ColorLok technology provides more vivid colors, bolder blacks and faster drying
- Superior quality, reliability, and dependability for high-volume printing at home, at school and in the office; HP Copy&Print20 print and copy paper prevents yellowing over time to ensure a long-lasting appearance for added archival quality
CSS Paged Media provides page-margin boxes for page-level header and footer content. Its standard page selectors include forms such as :first, :left, :right, and :blank; the cited syntax does not define a portable :last selector. Consequently, a rule such as @page :last should not be relied on as a cross-browser way to put content on the final page only.
Chrome for Developers reports that Chrome 131 added support for CSS page-margin content. That support can be useful for page-margin headers and footers in an appropriate Chrome environment, but it does not establish a last-page-only selector across browsers. Browser support is feature-specific and can change, so validate the exact browser or PDF renderer you deploy rather than assuming that a working margin box can identify the final page.
If the footer must sit at the bottom edge
When the requirement is specifically “at the bottom of the last sheet,” ordinary flowing HTML is not enough to promise the result. Pagination happens during rendering, and CSS needs a way to know which page is final before it can place page-specific content there. The standard selector syntax described above does not offer a portable last-page target.
Rank #3
- 3 ream case (1,500 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
- For a browser printout: choose the flow footer if placement after the content is acceptable. If exact bottom-edge placement is mandatory, check whether the exact browser version and margin-box features you control meet the requirement, then inspect the generated output.
- For generated PDFs: use a controlled, page-aware PDF or print-rendering workflow that can identify the final page, or add the footer after pagination by adjusting the generated PDF. The appropriate method depends on the renderer; there is no single universal mechanism established by the cited browser and CSS documentation.
This distinction matters for dynamic reports. A small change to text, font metrics, page size, or margins can push content onto another page. A footer positioned by page number or fixed coordinates may then land on the wrong page unless the workflow determines the final pagination and applies the footer accordingly.
Set up and validate browser printing
- Put the footer last. In the document markup, place the footer after every section that should appear before it.
- Hide it on screen. Set the footer to
display: noneoutside the print rule so it is reserved for printed output. - Show it for print. Add
@media printstyles withdisplay: block, plus any print typography or spacing it needs. - Preview the real output. Use the browser or PDF renderer that will produce the final printout. Check that the footer is present once and follows the content.
- Check the print setup. Verify paper size, orientation, margins, page-break behavior, and whether the print dialog adds its own headers or footers. These affect the available page area and can alter pagination.
Test with a short document, a long document, and content close to a page break. Then make a small content change and preview again. This catches the cases most likely to move the footer: a nearly full final page, content that expands or contracts, and a change in print settings. Do not validate only in the screen layout; print media styles and page fragmentation can produce a different result.
Or skip the browser setup
If you have already added the footer to the page and want a programmatic PDF or image capture instead of opening the browser print dialog, ScreenshotNeo offers a screenshot API and PDF capture. It does not add a last-page-only footer rule: the HTML and your renderer still determine the footer’s placement. For API options, see the ScreenshotNeo documentation.
Rank #4
- 5 ream case (2,500 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://example.com/report -o report.webpBefore capture, ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits cost nothing, and responses indicate the page verdict and whether the request was billed. Its MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents using Claude, Cursor, or another MCP client. The free plan includes 1,000 shots a month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to get 1,000 screenshots a month with no card.
Troubleshooting
The footer appears on screen
Check that the default rule for the footer is outside the print media block and sets display: none. Confirm that the print rule uses @media print and overrides it with a visible display value. Also check for other CSS rules with greater specificity that may override either declaration.
The footer appears on every page
Look for page-margin or renderer-specific footer settings that repeat content on each sheet. A footer element in normal document flow should occur once where it appears in the DOM; repeated page furniture is a different mechanism. Remove or disable the repeated setting if the footer should only follow the document content.
Best Value
- 8 ream case (4,000 sheets) of 8.5 x 11 white copier and printer paper for home or office use
- Multipurpose letter size copy paper works with laser/inkjet printers, copiers and fax machines
- Smooth 20lb weight paper for consistent ink and toner distribution; dries quickly and resists paper jams
- Bright white paper (92 GE; 104 Euro) offers great contrast for crisp printing and vivid color
- Virgin copy paper providing professional quality results; acid-free to prevent yellowing
The footer is on a new page
There may not be enough room for the footer after the final content at the current page size and margins. This is consistent with normal flow; break-inside: avoid discourages splitting the footer but does not force it to fit in the remaining space. If a separate final page is unacceptable, revise the document layout or use a page-aware rendering workflow, then check the output again.
The footer is not at the bottom of the sheet
The flow-based example places the footer after the content, not at a fixed page coordinate. Increasing a top margin only changes its distance from the preceding content; it does not make that placement reliably track the bottom edge across pages of different lengths. Use a controlled workflow that can identify and modify the final page if bottom alignment is a firm requirement.
Recommended Free Tools
The preview differs from the PDF or printed page
Check the actual output target, not just the browser’s screen view. Confirm page size, orientation, margins, and print-dialog headers or footers. Compare the browser or renderer version used in preview with the one producing the PDF, especially when relying on page-margin features.
Quick Recap
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.
