Overlay not covering whole page bugs happen when an overlay is sized to a parent, placed under a header, trapped in a scroll area, or mounted in the wrong layer.
CSS Overlay Fix
Why Does My Overlay Not Cover the Whole Page?
An overlay not cover whole page bug usually means the overlay is not actually sized or layered against the full viewport. It may be positioned inside a parent, limited by a grid column, trapped under a sticky header, clipped by a scroll container, or using height:100% when the page needs viewport-based sizing.
This is one of those bugs that looks simple but can destroy the feel of a page. A backdrop that only covers half the screen makes the modal feel broken. A menu overlay that stops under the header feels unfinished. A loading overlay that covers only one section can confuse users about what is actually disabled.
- overlay
- fixed inset
- viewport coverage
- z-index layers
Test viewport ownership first
Temporarily change the overlay to position:fixed; inset:0; and move it near the end of the body or into a root overlay layer. If it suddenly covers the whole page, the original overlay was attached to the wrong parent or layer.
Related: Try this in the FrontFixer Live Inspector.
Open Live Inspector→What the bug looks like
The backdrop, loading screen, menu layer, or dimmed area covers only part of the page.
Why it happens
The overlay is filling a parent, section, grid column, or scroll container instead of the viewport.
What usually fixes it
Use a fixed root overlay with inset:0 and a clear z-index layer.
Why overlays fail to cover the full viewport
An overlay is supposed to communicate control. When a modal opens, a menu slides out, or a loading state appears, users expect the affected area to be obvious. If the overlay only covers the component, the main column, or the area below the header, the interface sends mixed signals.
The overlay not cover whole page problem usually comes from mixing local layout rules with global UI intent. A card overlay can be local. A full-page modal backdrop should not be local. A section loading shimmer can belong inside one section. A global loading lock should belong to the viewport.
The clean fix is to decide the overlay’s job first. If it should cover the whole page, mount it in a root layer and size it to the viewport. If it should cover only one card, keep it inside that card intentionally.
fixed plus inset:0 is the safe baseline.The overlay uses height:100% inside a short parent
height:100% does not automatically mean the full page. It means the height of the containing block. If the parent is only a card, section, or wrapper, the overlay will only cover that parent.
Broken code
Parent-sized overlay.section {
position: relative;
}
.overlay {
position: absolute;
width: 100%;
height: 100%;
}Broken visual result
Correct code
Viewport overlay.overlay {
position: fixed;
inset: 0;
width: auto;
height: auto;
z-index: 1000;
}Fixed visual result
The header stays above the overlay
Sometimes the overlay covers most of the page but the sticky header remains visible. That usually means the header has a higher z-index or the overlay is mounted below a layer system that the header already owns.
Broken code
Overlay below header.header {
position: sticky;
z-index: 100;
}
.overlay {
position: fixed;
inset: 0;
z-index: 50;
}Broken visual result
Correct code
Overlay above page chrome:root {
--z-header: 100;
--z-overlay: 1000;
}
.overlay {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
}Fixed visual result
The overlay is trapped inside a scroll container
A scrollable parent can make an overlay cover only the visible panel or scroll with the content. This is common in dashboards, drawers, sidebars, tables, and app layouts with internal scrolling.
Broken code
Overlay inside scroll panel.panel {
max-height: 500px;
overflow: auto;
position: relative;
}
.panel .overlay {
position: absolute;
inset: 0;
}Broken visual result
Correct code
Root overlay outside scroll.panel {
max-height: 500px;
overflow: auto;
}
.overlay-root {
position: fixed;
inset: 0;
z-index: 1000;
}Fixed visual result
The overlay is mounted inside the main grid column
In two-column layouts, the overlay may be placed inside the main content column instead of a page-level root. It then covers only the article area while the sidebar, header, or other page regions remain uncovered.
Broken code
Overlay inside main column.layout {
display: grid;
grid-template-columns: 1fr 280px;
}
.main .overlay {
position: absolute;
inset: 0;
}Broken visual result
Correct code
Overlay outside layout grid.layout {
display: grid;
grid-template-columns: 1fr 280px;
}
.page-overlay {
position: fixed;
inset: 0;
}Fixed visual result
Three production-minded overlay coverage patterns
Premium overlay systems define coverage, scroll behavior, and layer order on purpose. Below are three different visual patterns so the overlay architecture does not become a repeated template.
Premium code example 1
Full-page overlay stack:root {
--z-header: 100;
--z-backdrop: 900;
--z-dialog: 1000;
}
.overlay-root {
position: fixed;
inset: 0;
z-index: var(--z-backdrop);
}
.dialog {
position: fixed;
z-index: var(--z-dialog);
}Premium visual result 1
The header stays in the app layer while backdrop and dialog own the overlay layer.
Premium code example 2
Mobile viewport overlay.mobile-overlay {
position: fixed;
inset: 0;
min-height: 100dvh;
overflow: auto;
}
.mobile-overlay__panel {
width: min(420px, 100%);
min-height: 100dvh;
}Premium visual result 2
The overlay uses viewport units and internal scrolling instead of depending on page height.
Premium code example 3
Local vs global overlay tokens.card-overlay {
position: absolute;
inset: 0;
}
.page-overlay {
position: fixed;
inset: 0;
}
.is-page-locked {
overflow: hidden;
}Premium visual result 3
The component can use a local overlay, while the app can use a global overlay root.
Fast practical rule
If the overlay should cover the whole page, use position:fixed, inset:0, and a root overlay layer. Do not rely on height:100%, main-column placement, or a local parent unless the overlay is intentionally local.
Debug checklist
- Check whether the overlay is
absoluteorfixed. - Replace width and height rules with
inset:0for full-page overlays. - Inspect whether the overlay is mounted inside a card, section, grid column, or scroll container.
- Compare the overlay z-index against sticky headers, menus, drawers, and modals.
- Look for parent
overflow:hiddenoroverflow:auto. - Use a root overlay layer for modals, page locks, loading screens, and menus.
- Use local overlays only for local card or section states.
- Test mobile viewport height with address bars and long content.
position:fixed; inset:0 and retest coverage.When a partial overlay is correct
Partial overlays are not always wrong. A card loading state, image hover layer, table blocker, or local section skeleton can correctly cover only one component. The problem begins when the overlay is meant to block the page but is mounted like a local component.
Use local overlays for local states. Use global overlays for global states. That simple separation prevents most coverage bugs before they appear.
This also keeps the article intent clean: this fix is about coverage area, not a generic modal bug or a generic z-index bug. The main question is whether the overlay owns the viewport or only owns a component.
The authority move is not to make every overlay full-screen. The authority move is to make the coverage match the user’s expectation.
Why this bug feels so visible
Users do not need to understand CSS to feel when an overlay is wrong. They see uncovered areas, clickable headers, floating sidebars, or page content that should be disabled but still looks active. That visual mismatch creates distrust quickly.
A correct overlay makes the interface state obvious. It tells users whether the whole page is blocked, one section is loading, or a focused dialog needs attention.
Related fixes that can help
Overlay coverage bugs often connect to modal order, z-index, sticky headers, dropdown clipping, tooltip layers, and button click problems.
Final takeaway
An overlay not cover whole page bug usually happens because the overlay is local while the design expects it to be global. The CSS may be filling a parent, grid column, scroll panel, or lower z-index layer instead of the viewport.
Use a root overlay layer, position:fixed, inset:0, and clear z-index tokens when the whole page must be covered. Keep partial overlays only when the component itself is the intended coverage area.