height:100% Not Working? Fix Parent Height Issues

If your element with height: 100% isn’t filling its parent, the usual cause is that the parent has no explicit height — percentage heights resolve against the parent’s computed height, and if that is auto, the child falls back to auto too. The fix is to give the parent a definite height (e.g., height: 500px, height: 100vh, or a flex/grid layout) or to use min-height with flexbox so the child can stretch.

Formula

Percentage heights work like this:

Child height = Parent height × (Percentage / 100)

Where:

• Parent height – the computed height of the parent element (in px, vh, etc.). If it’s auto, the percentage won’t resolve.
• Percentage – the value you set in CSS, e.g., 100%.
• Child height – the resulting height of the child element.

In practice, the browser only calculates a percentage height when the parent has a definite height (not auto). If the parent’s height is determined by its content, the percentage is treated as auto.

Worked Example

Using the defaults from the calculator: parent height = 500px, child percentage = 100%.

1. Convert the percentage to a decimal: 100 / 100 = 1.
2. Multiply by parent height: 1 × 500px = 500px.
3. So the child gets a height of 500px.

That matches the calculator’s output. If the parent were 300px, the child would be 300px, and so on.

Why height:100% Fails

CSS percentage heights are relative to the parent’s used height. If the parent’s height is auto (the default), the browser cannot compute a percentage, so it falls back to auto. This happens all the way up the DOM: if body and html don’t have heights, even a child of body with height:100% won’t work.

Common scenarios:

• The parent is a div with no height set – its height is determined by its content, so height:100% on a child does nothing.
• The parent is a body or html – these default to auto unless you set them explicitly.
• The parent uses min-height instead of height – percentages still fail because min-height doesn’t establish a definite height.
• The parent is a flex or grid container – the child may stretch automatically, but height:100% can still misbehave if the container’s height is auto.

How to Fix It

There are several reliable ways to make a child fill its parent:

1. Give the parent an explicit height – e.g., height: 400px or height: 100vh. Then height:100% on the child works as expected.
2. Set heights all the way up – for full-page layouts, set html, body { height: 100%; } and then the child can use height:100%.
3. Use flexbox – make the parent display: flex and give the child flex: 1 or align-self: stretch. This works even if the parent’s height is auto because flex items stretch by default.
4. Use CSS Grid – similar to flexbox, set the parent to display: grid and the child will fill the track by default.
5. Use absolute positioning – set the parent to position: relative and the child to position: absolute; top:0; bottom:0; width:100%; – this makes the child fill the parent’s height regardless of the parent’s height value.

Common Mistakes and Misconceptions

One common mistake is confusing height with min-height. Setting min-height:100% on a child does not make it fill the parent – it only ensures the child is at least that tall, but the percentage still resolves against the parent’s height, which may be auto.

Another mistake is forgetting that padding and borders add to the height. If the parent has box-sizing: content-box (default), a child with height:100% will be 100% of the parent’s content height, but the parent’s total height includes padding and border. This can cause overflow. Using box-sizing: border-box on both parent and child often avoids this.

Also, height:100% on the html element is special – it refers to the viewport height, not the document height. So if you want a full page background, you need to set html and body both to height:100%.

When to Use Each Method

Choose the method based on your layout:

• Fixed height parent – if you know the parent’s height in px or vh, just use height:100% on the child.
• Full viewport height – use height:100vh on the parent, or set html, body { height:100% } and then use height:100%.
• Dynamic content – if the parent’s height depends on content, use flexbox or grid. They handle auto heights gracefully.
• Overlay or absolutely positioned elements – use absolute positioning with top:0; bottom:0 to fill the parent without relying on percentage heights.

Limitations of Percentage Heights

Percentage heights are only as good as the parent’s height. If the parent’s height is auto, the percentage is ignored. This is a fundamental CSS behavior, not a bug. It also means that if the parent’s height changes (e.g., due to viewport resize), the child will follow, but only if the parent’s height is explicitly set.

Another limitation: percentage heights can’t be used to create a circle that scales with width, because height percentages don’t refer to width. For that, you’d use aspect-ratio or padding-top hack.

Frequently Asked Questions

Why does height:100% not work on body?

Because body has a default height of auto. To make height:100% work on a child of body, you need to set html { height: 100% } and body { height: 100% } (or use min-height:100vh on body).

Does height:100% work with padding?

It works, but the percentage is based on the parent’s content box (inside padding). If the parent has padding, the child will be 100% of the content height, which may be less than the total height. Using box-sizing: border-box on the parent makes the height include padding, so the child fills the whole area.

What’s the difference between height:100% and height:auto?

height:auto lets the element size to its content. height:100% forces the element to be exactly the parent’s height (if the parent has a definite height). If the parent is auto, both behave the same.

Can I use height:100% on a flex child?

Yes, but it’s often unnecessary. Flex children stretch to fill the container by default (align-items: stretch). If you set height:100%, it will work if the flex container has a definite height, but it may override the stretch behavior. Usually you’re better off using flex:1 or relying on the default stretch.

Why does my child overflow the parent with height:100%?

This usually happens because the parent has padding or border, and the child’s height:100% is based on the content box, not the border box. The child’s total height (including its own padding/border) exceeds the parent’s content height. Fix by using box-sizing: border-box on both, or by reducing the child’s height percentage.

Is there a way to make height:100% work without setting parent height?

Yes, use flexbox or grid. For example, set the parent to display:flex and the child to flex:1. This makes the child fill the parent’s cross-axis (height) even if the parent’s height is auto. Similarly, grid items stretch by default.

Related

• Lisa x PlayStation Gear: How It Differs From Standard Merch
• Arcade Codes: What They Are & How to Build One
• Observability vs Monitoring: What Alerts Miss

in h | Parent height | px | 500 | 0
in ch | Child height % | % | 100 | 0
out result | Child height | px | h * ch / 100 | 2