Free tools Windows power users keep installed
One-click scans. No signup required.
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
If your page gets an unwanted vertical scrollbar after you set body { height: 100vh; }, 100vh is usually not the whole problem. In a common case, the browser’s default body margin and the default margins on elements such as <h1> and <p> add space around a body already sized to one viewport. For a page background, remove the unnecessary height; for a viewport-height section, use min-height and manage its spacing.
Why the scrollbar appears
Consider a page with a heading and paragraph:
<h1>Heading</h1>
<p>Paragraph</p>Now give the body a fixed viewport height and a background:
body {
height: 100vh;
background: linear-gradient(white, tan);
}100vh means 100% of the relevant viewport height. It does not include an element’s outside margins or guarantee that its descendants will fit. A fixed-height box has no extra room if margins, padding, borders, or content require more space.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsBrowsers commonly give body a default margin—often 8 CSS pixels—and headings and paragraphs also have user-agent margins. The first heading’s top margin may collapse through its parent, affecting the document’s outer spacing. The exact layout depends on the markup, styles, and browser handling of the root and body, so inspect the actual overflow rather than assuming one margin is always responsible. The original SitePoint discussion describes this combination of body spacing and child margins.
#1 Best Overall
Vertical margin collapsing is a normal CSS rule: adjoining vertical margins can combine rather than simply add. It is not the same as padding, and it does not mean every margin should be removed. See MDN’s margin reference for details.
Choose the fix that matches the job
If you only want a full-page background
Do not set a height just to make the gradient reach the page. A body background is a conventional way to paint a document background and can cover the canvas without forcing the body to be exactly one viewport tall:
html,
body {
margin: 0;
}
body {
background: linear-gradient(white, tan);
}If you want the gradient to remain attached to the viewport while the document scrolls, you can try background-attachment: fixed:
Recommended Free Tools
body {
background: linear-gradient(white, tan) fixed;
}Fixed backgrounds have had inconsistent behavior in some mobile browsers, so test on the devices you support. Applying a background to html instead is also possible, but root and body backgrounds have special canvas-propagation behavior. Treat that as a deliberate choice about background layers, not a universal overflow fix; the canvas background discussion explains the distinction.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
If the whole document should be at least viewport-height
Use min-height rather than capping the body at one viewport. The body can then grow when content needs more room:
html,
body {
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
background: linear-gradient(white, tan);
}
h1 {
margin-top: 0;
}Set the margins you want for headings and paragraphs as part of your typography. For example, use parent padding for top spacing rather than relying on a first child’s top margin:
body {
margin: 0;
padding: 2rem;
min-height: 100vh;
}
h1 {
margin-top: 0;
}Alternatively, when a container should establish a formatting boundary, display: flow-root can do so without making it a scrolling container:
main {
display: flow-root;
}overflow: auto also establishes a formatting context, but it may make that element a scroll container. Do not use overflow: hidden just to work around margin collapse unless clipping is intentional.
Rank #3
If only a hero or panel should fill the viewport
Put the viewport sizing on that section, not the entire document. Include its padding and border in the declared size with box-sizing: border-box:
html,
body {
margin: 0;
}
.hero {
min-height: 100vh;
padding: 2rem;
box-sizing: border-box;
background: linear-gradient(white, tan);
}With the default content-box model, padding and borders are outside the declared content-box height. That can make a viewport-sized element taller than expected. MDN’s height reference also cautions that fixed heights can let content overflow when it does not fit.
Mobile viewport units: vh, svh, lvh, and dvh
On mobile, the viewport visible to the user can change as browser controls expand or retract. Do not assume 100vh always equals the currently visible screen. Modern CSS defines:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →svh: small viewport height, with dynamic browser UI shown. Choose it when content should fit within that safer, smaller area.lvh: large viewport height, with browser UI retracted. Choose it when filling the largest viewport is intentional and changing visible space is acceptable.dvh: dynamic viewport height, which changes with the browser UI. Choose it when the section should track the currently visible viewport, knowing that resizing can shift the layout.vh: the default viewport-height unit; current specifications define it as equivalent tolvh.
A common progressive pattern for a full-height section is:
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.hero {
min-height: 100vh;
min-height: 100dvh;
}Browsers that support dvh use the second declaration; others keep the vh fallback. If avoiding browser-UI overlap matters more than filling the largest possible area, use 100svh instead. Dynamic units can trigger layout changes as the browser interface moves. Consult MDN’s viewport-length reference and the CSS Values and Units specification for definitions. For mobile pages, include the viewport meta tag so the layout viewport is based on the device width:
<meta name="viewport" content="width=device-width, initial-scale=1">See MDN’s viewport guide for how it affects mobile layout.
Why overflow: hidden is usually the wrong fix
This rule can hide the scrollbar:
body {
height: 100vh;
overflow: hidden;
}But it hides overflow rather than correcting the layout. If real content extends below the viewport, users may have no way to reach it. Use it only when the design intentionally prevents page scrolling and scrolling is handled elsewhere. The alternative is not “never use hidden”; it is to make the scrolling model explicit.
Windows Errors? Fix Them Before They Spread
Repair common Windows errors and clear accumulated junk for a smoother, more stable PC - no reinstall needed.Free scan · no reinstallOutdated Drivers Are Slowing You Down
One free scan finds every outdated or missing driver and matches the right update for your exact hardware.Free scan · exact hardware matchFor example, an app shell can keep the outer page fixed while allowing a content panel to scroll:
html,
body {
height: 100%;
margin: 0;
}
body {
overflow: hidden;
}
.app {
height: 100%;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
}
.content {
min-height: 0;
overflow: auto;
}Here, scrolling is deliberately assigned to .content. The minmax(0, 1fr) track and min-height: 0 allow the content area to shrink within the shell rather than forcing the grid beyond its intended height.
Track down any remaining overflow
- Open DevTools and inspect
html,body, and the elements nearest the bottom of the page. - Temporarily outline elements to see which box extends beyond the viewport:
* { outline: 1px solid red; } - Check computed
margin,padding,border,height,min-height, andoverflow. - Try an explicit root/body reset, then inspect the first heading’s top margin and the last paragraph’s bottom margin if overflow remains.
- Look for a child with
height: 100vhinside a padded parent, an image or iframe that is too tall, long unbroken text, or a fixed header paired with an incorrectcalc()height. - In flex and grid layouts, check whether a child’s automatic minimum size prevents it from shrinking. A scrollable flex child often needs
min-height: 0. - Confirm the scrollbar is vertical. Horizontal overflow can be mistaken for an extra scrollbar. In particular,
width: 100vwmay include the width occupied by a classic desktop scrollbar;width: 100%is often the better fit for a full-width element. - Test mobile browser behavior separately if the issue appears only on a phone; viewport units and browser chrome may be involved.
If a full-screen design must account for a display cutout or home indicator, use safe-area insets in its padding and keep the box sizing in mind:
.hero {
box-sizing: border-box;
padding:
max(1rem, env(safe-area-inset-top))
max(1rem, env(safe-area-inset-right))
max(1rem, env(safe-area-inset-bottom))
max(1rem, env(safe-area-inset-left));
}Working example: normal page with a full-page gradient
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full-page background</title>
<style>
html,
body {
margin: 0;
}
body {
min-height: 100vh;
min-height: 100dvh;
background: linear-gradient(white, tan);
}
h1,
p {
margin-top: 0;
}
</style>
</head>
<body>
<h1>Heading</h1>
<p>Paragraph</p>
</body>
</html>This keeps the gradient, removes the common root spacing, and lets the body grow if content exceeds the viewport. The heading and paragraph margins remain a typography decision; adjust them intentionally rather than globally zeroing every element’s margin.
Bottom line
For the original short-page problem, first remove the default root spacing and inspect the heading and paragraph margins. If you only need a page background, remove height: 100vh altogether. If the design needs a viewport-height region, prefer min-height, account for padding with box-sizing, and choose the mobile viewport unit that matches the behavior you want. Use overflow clipping only when hiding content is intentional.
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.
