height: 100% only fills a parent when the browser can resolve the parent’s height. If the parent has an automatic, content-dependent height—or only a min-height—a non-absolutely positioned child’s percentage height generally computes to auto. Set up a definite height where needed, or use flexbox, grid, or viewport sizing for the layout you actually want.
Why doesn’t height: 100% fill the parent?
A percentage height is calculated from the height of the child’s containing block. The CSS Box Sizing specification puts it simply: “Percentages are resolved against the width/height, as appropriate, of the box’s containing block” (W3C CSS Sizing Module Level 3).
In normal flow, if the containing block’s height depends on its content rather than being explicitly specified, the percentage height on a non-absolutely positioned child computes to auto. The child therefore does not make itself as tall as the parent. A min-height is a lower bound, not an explicit height that necessarily gives the child a resolvable percentage basis. See the MDN height reference for the property’s sizing behavior.
Check the parent and every ancestor in the height chain
Inspect the computed styles in your browser’s developer tools, starting with the child and moving upward through its ancestors. Look for the first containing block whose relevant height is definite, and check whether any intermediate element has an automatic or content-dependent height. A percentage cannot resolve through a chain that never establishes a usable height.
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
- Explicit height: A declared height can provide a basis for the child’s percentage, subject to the layout rules and constraints involved.
- Automatic height: If the element grows to fit content, its height is not a fixed percentage basis for an ordinary child.
- Only
min-height: The element is guaranteed a minimum size, but that does not make a child’sheight: 100%fill that minimum. - Flex or grid layout: The container’s sizing rules and the child’s automatic minimum size may affect the result; percentage height is not always the right way to distribute space.
The exact cause depends on the markup, computed styles, and formatting context. Standards describe the general rule, but without those details it is not possible to identify a particular page’s failing ancestor or constraint.
Choose a fix based on the layout you need
Make the child equal a known parent height
If the child must match a specific available height, give the relevant containing block a definite height. If the percentage depends on several ancestors, establish the height through the necessary chain rather than setting height: 100% only on the child.
.parent {
height: 24rem;
}
.child {
height: 100%;
}Use a value appropriate to your design; 24rem is only an illustration. Keep in mind that a fixed height can cause content to overflow if the content grows beyond the box. The MDN box model guide explains how sizing, padding, and borders interact.
Let a page grow while ensuring it is at least viewport-tall
For a page that should reach at least the viewport height and expand naturally with its content, put a viewport-based min-height on the page shell and let the content size normally. Do not expect a child’s percentage height to derive its value from that minimum.
Free tools Windows power users keep installed
One-click scans. No signup required.
.page {
min-height: 100vh;
}For layouts such as a footer pushed toward the bottom of a short page, flexbox or grid can be a better fit than percentage heights. Their layout mechanisms can distribute available space when the container has an appropriate available size.
Use flexbox or grid to distribute available space
When a layout has a constrained region—such as a header, a main area, and a footer—flexbox or grid can express how the remaining space should be allocated. For example, a column flex container can let its main region grow rather than requiring a child to calculate its height as a percentage:
Rank #4
.layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
main {
flex: 1;
}This is a layout pattern, not a universal fix. If a flex or grid child must shrink inside a constrained region or become scrollable, check its automatic minimum size and the grid track’s minimum sizing. In some cases, min-height: 0 on the appropriate child permits shrinking; choose overflow behavior deliberately rather than applying it automatically. See the Flexbox specification’s automatic minimum size rules and the Grid specification’s automatic minimum size rules.
Choose a viewport unit for a full-screen layout
100vh corresponds to the large viewport. On mobile, browser controls can make the visible area differ from that size. CSS also provides svh for the small viewport, lvh for the large viewport, and dvh for the dynamic viewport. Choose according to whether the layout should remain stable at the small viewport, use the large viewport, or follow the currently visible viewport; test the behavior on the browsers and devices you support.
Best Value
.full-screen {
min-height: 100dvh;
}Watch for overflow and box sizing
A percentage height that does resolve may still produce unexpected overflow. With the default content-box sizing, padding and borders are added outside the declared content height. If the intended 100% includes those edges, box-sizing: border-box can make the box’s total size match its declared size:
.child {
box-sizing: border-box;
height: 100%;
}This changes how the box is measured; it does not create a definite height for an otherwise content-sized parent. Also decide whether excess content should expand the layout, scroll, or be clipped, rather than assuming a fixed-height box will always accommodate it.
Quick Recap
Quick diagnosis
- Inspect the child’s computed
heightand the computed height of its containing block. - Check whether the parent has an explicit height, an automatic content-dependent height, or only
min-height. - Trace the ancestors if the percentage relies on a height set farther up the tree.
- Check whether flexbox or grid sizing, automatic minimum sizes, padding, borders, or overflow explains the result.
- Choose the layout mechanism that matches the goal: a definite height for an exact match, flex or grid for space distribution, or viewport-based minimum height for a content-growing page.
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.
