What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
height: 100% only fills a parent when the parent’s height is definite and available to the child. If the parent is sized by its content or has only min-height, the child’s percentage height usually resolves as auto. Use an explicit height chain for equal-height boxes, or use flexbox, grid, or a viewport-based min-height when the page should grow naturally.
Why the percentage height is ignored
CSS percentages are resolved against the height of an element’s containing block. The CSS Box Sizing specification states: “Percentages are resolved against the width/height, as appropriate, of the box’s containing block.” If that height depends on the child’s content, it is not definite enough to resolve an ordinary in-flow child’s percentage height, so height: 100% computes to auto.
As an Amazon Associate I earn from qualifying purchases.
This is why a parent with min-height: 400px does not automatically give a child a usable 100% height. min-height is a lower bound: it says the parent cannot be shorter than 400 pixels, but the parent’s used height may still be determined by its content. A minimum is not the same sizing input as an explicit height.
Check the containing-block height first
- Open developer tools and select the child with
height: 100%. - In the Computed styles panel, inspect its used height and the height of its direct parent.
- Walk up every ancestor that participates in the percentage chain. Look for an explicit
height, an auto/content-sized height, or only amin-height. - Check whether the child is in normal block flow, a flex container, a grid container, or absolutely positioned; each formatting context applies additional sizing rules.
- Inspect padding, borders, overflow, and automatic minimum sizes after the basic height issue is identified.
Without the markup and computed styles, no single declaration can explain every case. The same symptom can come from an indefinite parent height, flex or grid minimum sizing, box-model overflow, or an intentional content-growing design.
#1 Best Overall
Use a definite height when the child must match the parent
Give the relevant containing block a definite height, and establish one on each ancestor between it and the child when necessary.
html, body {
height: 100%;
}
.page {
height: 600px;
}
.panel {
height: 100%;
}The chain matters: if .page is height: 100% but its parent has no definite height, the chain still cannot resolve. Choose a definite value that reflects the actual available space, such as a known component height or a height supplied by the surrounding layout.
Account for padding and borders
By default, height applies to the content box. A child set to 100% can therefore become taller than the visual space once its own padding and borders are added.
.panel {
box-sizing: border-box;
height: 100%;
padding: 1rem;
border: 1px solid currentColor;
}box-sizing: border-box makes the declared height include the child’s padding and border. It prevents that particular form of overflow, but it cannot make an indefinite parent height definite.
When the page should be at least viewport-tall
For a page shell that should reach the viewport and expand as content grows, use a viewport-based minimum on the shell and let normal flow determine the content height. Do not make a child derive its height from that minimum.
.page {
min-height: 100vh;
}
100vh represents the large viewport. On mobile, browser interface controls can make the visible area different from that value. CSS also provides viewport variants:
Rank #3
- 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
| Unit | Behavior | Use when |
|---|---|---|
svh |
Small viewport height | You need a stable value that fits the smallest browser viewport. |
lvh |
Large viewport height | You want the maximum viewport size; this is the basis of vh. |
dvh |
Dynamic viewport height | The shell should track the currently visible viewport as browser controls appear or disappear. |
.page {
min-height: 100dvh;
}
Choose the unit according to the desired mobile behavior and verify it on the browsers and devices you support.
Prefer flexbox for columns and a footer pushed down
If the goal is a full-height page with a header, flexible content area, and footer, flexbox usually expresses the layout better than percentage heights.
.page {
min-height: 100dvh;
display: flex;
flex-direction: column;
}
main {
flex: 1;
}
The page can grow when content exceeds the viewport, while flex: 1 consumes remaining space when there is extra room. The main element does not need height: 100%.
Allow a constrained flex child to shrink
In a constrained flex column, the automatic minimum size can prevent a child from shrinking and can produce overflow instead of the scrolling behavior you expect. Set min-height: 0 on the appropriate child, then define where scrolling belongs.
.layout {
height: 100dvh;
display: flex;
flex-direction: column;
}
.content {
min-height: 0;
overflow: auto;
}
This is a flex sizing and overflow fix, not a general replacement for a missing percentage-height chain. Confirm that scrolling the content region is the intended result.
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 →Use grid when tracks should divide available space
Grid can assign available height directly to rows, avoiding manual percentage heights.
Best Value
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
.layout {
min-height: 100dvh;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
}
.content {
overflow: auto;
}
minmax(0, 1fr) lets the middle track shrink to the available space rather than honoring an automatic minimum that forces the grid to overflow. As with flexbox, set overflow deliberately and test long content.
Common fixes that fail
- Adding
height: 100%to both parent and child without a definite ancestor: the percentage chain remains unresolved. - Replacing
min-heightwith a fixed height without considering content: content can overflow or be clipped when it exceeds the chosen value. - Adding more percentage heights inside an auto-sized component: percentages still have no definite reference and may compute to
auto. - Using
box-sizing: border-boxas the only fix: it handles padding and border arithmetic, not an indefinite containing block. - Assuming a viewport unit solves every layout: mobile browser controls and the choice between stable, large, and dynamic viewport behavior still matter.
Choose the sizing strategy by the intended behavior
| Requirement | Suitable approach | Important check |
|---|---|---|
| Child must equal a known parent height | Provide a definite height through the containing-block chain; use height: 100% only where that chain is definite. |
Include padding and borders with box-sizing: border-box when appropriate. |
| Page must fill the viewport but grow with content | Use min-height with vh, svh, lvh, or dvh. |
Select the viewport variant for the target mobile behavior. |
| Header, content, and footer share available space | Use flexbox or grid. | Check automatic minimum sizes and overflow. |
| Content should scroll inside a constrained region | Give the layout a real available height, then apply overflow: auto to the scrolling child. |
In flex or grid, use min-height: 0 or minmax(0, 1fr) where needed. |
| Content should expand the page naturally | Leave the content height as auto; avoid forcing 100% heights. |
Use normal flow and a shell minimum rather than a child percentage. |
A practical debugging example
Suppose a section has min-height: 500px and its child has height: 100%. If the section’s content is only 200px tall, the section may still be at least 500px visually, but its used height was not supplied as a definite percentage reference. The child therefore remains content-sized. If the section later grows to 800px because of content, the child does not automatically become an 800px percentage box.
If the section must be an exact 500px component, use height: 500px (or a definite height from its layout context) and handle excess content with an intentional overflow policy. If it is a page shell, keep min-height, remove the child’s percentage height, and use flex or grid to distribute spare viewport space.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsQuick 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.
