3

According to https://developer.mozilla.org/en-US/docs/Web/CSS/padding-bottom a 100% padding-bottom value should be the same as setting it to 100px when the width is 100px.

However, the value used as width is not the width set to the div (100px) but the width of the div's container, which is the body here. Why is this the case?

When display of the div is switched to table-cell then the padding becomes 100px as then the width set to the div is taken serious. Otherwise the div is considered to range across the whole body as if it had no set width.

<div>hoho</div>

div {
    width: 100px;
    padding-bottom: 100%;
    background: lightcoral;
}

https://jsfiddle.net/citykid/zx5uptwy/4/

citykid
  • 9,916
  • 10
  • 55
  • 91

1 Answers1

4

From MDN:

The size of the padding as a percentage, relative to the width of the containing block

Emphasis mine.

Which means this is what you're looking for:

.wrapper {
  width: 100px;
}

.content {
  padding-bottom: 100%;
  background: lightcoral;
}
<div class="wrapper">
  <div class="content">hoho</div>
</div>
Leland
  • 2,019
  • 17
  • 28