Use await page.setViewport({ width: 1280, height: 800 }) to set a Puppeteer page’s viewport to 800 CSS pixels high. The number is a CSS-pixel dimension, not a percentage. If you mean that an element inside the page should fill the viewport, set its CSS height separately—usually with a viewport unit such as 100vh—because CSS height: 100% is calculated from the containing block, not directly from the browser viewport.
Set the Puppeteer viewport height
Call page.setViewport() with explicit width and height values. Set it before navigation when practical:
import puppeteer from 'puppeteer';
const browser = await puppeteer.launch();
try {
const page = await browser.newPage();
// Both dimensions are CSS pixels.
await page.setViewport({ width: 1280, height: 800 });
await page.goto('https://example.com', { waitUntil: 'domcontentloaded' });
console.log(await page.evaluate(() => ({
innerWidth: window.innerWidth,
innerHeight: window.innerHeight,
})));
} finally {
await browser.close();
}Puppeteer defines Viewport.height as the page height in CSS pixels. Choose the height your test or capture needs and pass it as a number; setViewport() does not accept a CSS percentage such as '100%'. Its getting-started example uses 1080 by 1024 as an example, not as a universal recommended size. See the Viewport interface and Puppeteer getting-started guide.
Set it before loading the page
Configure the viewport before page.goto() where possible. Puppeteer notes that changing viewport settings can reload a page in some cases, including when mobile emulation or touch is enabled. Set the intended device and viewport configuration first, then navigate and measure the page. The documented defaults for isMobile and hasTouch are false, and deviceScaleFactor is 1. See Puppeteer’s page viewport reference.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
#1 Best Overall
Give every page its own dimensions
Each Puppeteer page can have its own viewport. This is useful when one browser session needs to check several layouts, such as a desktop-width page and a narrow mobile-width page. Set the viewport on the relevant page rather than assuming that a change to one page resizes every other page.
Make an element fill the viewport with CSS
Changing Puppeteer’s emulated viewport does not automatically make a page element fill it. For a section that should be at least as tall as the viewport but may expand with its content, use:
.full-height {
min-height: 100vh;
}For an element that should have a fixed height matching a particular viewport behavior, use an appropriate viewport unit, for example:
Rank #2
.full-height {
height: 100dvh;
}CSS viewport units and Puppeteer viewport settings solve related but separate problems: Puppeteer chooses the dimensions of the page viewport; CSS determines how elements size themselves within the page.
Recommended Free Tools
Choose among vh, svh, lvh and dvh
MDN defines 1vh as 1% of the viewport’s initial containing block height and documents vh as equivalent to lvh in its current reference. It also defines small, large and dynamic viewport units: svh, lvh and dvh. On devices where browser controls change the visible area, those units can represent different viewport sizes. Choose the one that matches the layout behavior you want instead of treating them as interchangeable. See MDN’s CSS length reference.
Use min-height when content can grow
min-height: 100vh gives an element a viewport-height floor without forcing it to stop growing when content is taller. A fixed height can constrain content, so decide how overflow should behave if the content exceeds the available height. MDN also notes that min-height and max-height override height when their constraints apply. See the MDN height property reference.
Why height: 100% may not fill the screen
A CSS percentage height is resolved against an element’s containing block. If that containing block’s height is not explicitly specified and instead depends on its content, a non-absolutely-positioned child’s percentage height computes to auto. As a result, putting height: 100% on a nested element does not necessarily make it as tall as the viewport.
Use a percentage when you want an element sized relative to a parent whose height resolves as intended. Use a viewport unit when the target is the viewport itself. The root element’s percentage height is relative to the initial containing block. These are CSS layout rules; they do not change the numeric height you pass to Puppeteer. See MDN’s height documentation.
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 →Choose the right Puppeteer sizing API
| Goal | Use | What it controls |
|---|---|---|
| Emulate a page viewport at explicit dimensions | await page.setViewport({ width, height }) |
Page viewport in CSS-pixel dimensions. |
| Set a default viewport for pages | Puppeteer’s defaultViewport option |
Default page viewport; documented default is 800 × 600 CSS pixels. |
| Reset a page viewport setting | await page.setViewport(null) |
Resets the page to the default viewport setting. |
| Resize the browser content area | await page.setViewport(null), then await page.resize({ contentWidth, contentHeight }) |
Browser content dimensions; this is distinct from viewport emulation. Page.resize is experimental and updates asynchronously. |
| Make an element viewport-height | CSS height: 100vh or a suitable svh, lvh or dvh unit |
Element layout relative to a viewport size. |
| Make a child match its parent | CSS height: 100% |
Element height relative to a containing block whose height must resolve as intended. |
The documented default for Puppeteer’s ConnectOptions.defaultViewport is 800 × 600, and the option may be set to null. That is a Puppeteer default, not a claim about users’ screens. A page’s viewport() method reports Puppeteer’s current configured viewport settings; the reference says it does not verify the actual page viewport. See ConnectOptions and Page.viewport().
When you need a real browser-window content size
page.setViewport() emulates page viewport dimensions; it is not the same as resizing the browser window’s content area. Puppeteer’s window-management guide demonstrates clearing the default viewport, calling page.resize({ contentWidth, contentHeight }), and waiting for the asynchronous size change before measuring window.innerWidth and window.innerHeight. The guide identifies Page.resize as experimental, so use it only when the browser content-area size—not just the page viewport—is the requirement. See Puppeteer window management and the Page class reference.
Verify the size you configured
Use page.viewport() to inspect Puppeteer’s configured viewport object, and evaluate window.innerWidth and window.innerHeight to inspect the page’s reported content viewport after navigation:
const configuredViewport = page.viewport();
const measuredViewport = await page.evaluate(() => ({
width: window.innerWidth,
height: window.innerHeight,
}));
console.log({ configuredViewport, measuredViewport });These checks answer different questions. The first is Puppeteer’s configuration; the second measures values exposed by the page. Puppeteer explicitly cautions that page.viewport() does not check the actual page viewport.
Best Value
- Used Book in Good Condition
Or skip the browser setup
If you need a website screenshot rather than a Puppeteer test environment, ScreenshotNeo captures a URL through one API request. It accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads and cache hits cost nothing, and the response identifies the page verdict and billing status in headers. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients.
For a screenshot with an 800-pixel viewport height, use the viewport_height parameter in the request:
curl -G "https://api.screenshotneo.com/v1/shot"
-d access_key=YOUR_API_KEY
--data-urlencode url=https://example.com
-d viewport_width=1280
-d viewport_height=800
-o shot.webpSee the ScreenshotNeo API documentation for request options. It provides 1,000 screenshots a month free with no card; paid plans start at $5 for 3,000. Start with the free ScreenshotNeo account.
Troubleshooting viewport height problems
- A child with
height: 100%is not viewport-height: inspect the child’s containing block. If the parent’s height is not definite, the percentage can compute toauto. Use a viewport unit when the viewport itself is the reference. - The page reloads after a viewport change: set the viewport before navigation when practical, especially if changing mobile or touch emulation settings.
- The browser’s content area is the target: do not rely on
setViewport()as a native window resize. Consider the experimentalpage.resize()flow and wait for its asynchronous resize notification before measuring. - Content is clipped or overflows: decide whether the element should grow beyond viewport height. Prefer
min-heightif it must be at least viewport-height and still accommodate taller content; if using fixedheight, define the desired overflow behavior. - Mobile browser bars affect the layout: choose between small, large and dynamic viewport units according to the desired visible-area behavior; MDN currently documents
vhas equivalent tolvh. - The value from
page.viewport()seems inconsistent with the page: remember that it reports Puppeteer’s configured settings, not a measurement of the actual page viewport. Compare it with values evaluated inside the page.
Frequently asked questions
Can I pass height: '100%' to page.setViewport()?
No. Pass a numeric height in CSS pixels, such as height: 800. CSS percentages belong in styles applied to page elements.
Does a 100% viewport height mean the full page is 800 pixels tall?
No. It means the viewport used to display the page is 800 CSS pixels high. The document can be taller if its content extends beyond the viewport.
Can I set the height without setting the width?
setViewport() takes a viewport object with dimensions. Choose both width and height for the layout you want to emulate; viewport width can affect responsive layout and therefore the page’s content and height.
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.
