CSS Percentages

A percentage is a share of something else, and which “something” depends on the property.

1
2
3
4
5
6
7
8
9

<style>
  .parent { width: 300px; background: #f4f9fc; padding: 8px; }
  .child { background: #d94a00; color: #fff; padding: 6px; margin-bottom: 6px; }
</style>
<div class="parent">
  <div class="child" style="width: 100%">width: 100%</div>
  <div class="child" style="width: 50%">width: 50%</div>
  <div class="child" style="width: 25%">width: 25%</div>
</div>

If you change the parent’s width, all three children resize with it. That is why percentages are the base of fluid layouts.

Why height: 100% often does nothing

For height: 100% to work, the parent needs a defined height. A parent whose height is auto is sized by its children, so the child’s 100% has nothing to refer to. For full-screen sections, use min-height: 100vh instead (see Viewport Units).

Percentages and padding

padding: 10% is 10% of the parent’s width on all four sides. This can be used on purpose. For example, to keep an aspect ratio. The modern way is aspect-ratio: 16 / 9.