Introduction

height: 100% with padding and margin causes confusion because percentage heights are based on the containing block’s height, while padding and margin affect the final rendered box in different ways. If you do not account for the box model correctly, the element often overflows instead of fitting exactly.

The right fix depends on what you actually mean by “fill the height.” Sometimes the answer is box-sizing: border-box, sometimes it is flexbox, and sometimes the correct solution is to stop using percentage height entirely and use viewport units or layout containers instead.

Why height: 100% Often Overflows

By default, height applies to the content box. Padding and border are then added on top of that. So if a child element has height: 100% and also padding: 20px, its rendered box becomes taller than the parent.

1html, body {
2  height: 100%;
3  margin: 0;
4}
5
6.container {
7  height: 100%;
8  padding: 20px;
9  background: #eef;
10}

With the default box-sizing: content-box, the content area gets 100% of the available height and the padding is added after that, causing overflow.

Use box-sizing: border-box

If you want the padding included inside the declared height, switch to border-box.

1html, body {
2  height: 100%;
3  margin: 0;
4}
5
6.container {
7  height: 100%;
8  padding: 20px;
9  box-sizing: border-box;
10  background: #eef;
11}

Now the element’s total height stays within the 100% height budget, because padding and border are counted inside the declared size.

This is usually the simplest fix when the parent has a real height and the only problem is padding.

Margins Are Different

Margins sit outside the box. box-sizing does not include them, so vertical margins can still push the total rendered space beyond the parent’s height.

That means height: 100% plus top and bottom margins often still overflows even when border-box is used.

If you need internal spacing, prefer padding. If you need sibling spacing in a layout, flexbox or grid often solves the problem more naturally than trying to subtract margins manually.

Flexbox Is Often the Better Layout Tool

For page layouts, flexbox usually expresses “fill remaining height” more accurately than percentage heights.

1html, body {
2  height: 100%;
3  margin: 0;
4}
5
6body {
7  display: flex;
8  flex-direction: column;
9}
10
11header,
12footer {
13  flex-shrink: 0;
14  padding: 16px;
15  background: #ddd;
16}
17
18main {
19  flex: 1;
20  padding: 20px;
21  box-sizing: border-box;
22  overflow: auto;
23}

Here main fills the remaining vertical space after header and footer take their natural size. This usually matches application-layout intent better than stacking 100% heights.

Be Sure the Parent Has a Height

A percentage height only works when the parent’s height is itself definite. If the parent’s height is auto, then height: 100% on the child has no solid reference.

That is why people often need:

html, body {
  height: 100%;
}

If the ancestor chain does not establish a height, the child’s percentage height cannot resolve as expected.

Common Pitfalls

A common mistake is setting height: 100% on a child without giving the parent a defined height. In that case, the child cannot actually compute the percentage.

Another issue is expecting box-sizing: border-box to solve margin overflow. It only affects content, padding, and border, not outer margins.

Developers also often use percentage heights for app-shell layouts where flexbox or grid is the more natural tool.

Finally, do not assume “100% height” means “fill the screen.” Sometimes what you actually want is min-height: 100vh or a flex container that fills the viewport.

Summary

• 'height: 100% targets the content box unless box-sizing: border-box is used.'
• Padding can be included inside the height with border-box, but margins remain outside.
• Percentage height works only if the parent has a definite height.
• Flexbox is often the cleaner solution for full-height page layouts.
• Decide whether you need internal spacing, outer spacing, or true remaining-height layout before choosing the CSS fix.